cloudinary-video-player 1.6.2-edge.13

package/test/isValidConfig.test.js

@@ -0,0 +1,224 @@
+import { isValidConfig } from '../src/validators/validators-functions';
+import { validator } from '../src/validators/validators-types';
+import { noop } from '../src/utils/type-inference';
+
+describe('test isValidConfig method', () => {
+
+  describe('should be a number', () => {
+
+    const validators = {
+      test: validator.isNumber
+    };
+
+    it('is valid number', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid number', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a string', () => {
+
+    const validators = {
+      test: validator.isString
+    };
+
+    it('is valid string', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid string', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a boolean', () => {
+
+    const validators = {
+      test: validator.isBoolean
+    };
+
+    it('is valid boolean', () => {
+      const isValid = isValidConfig({
+        test: true
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid boolean', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a function', () => {
+
+    const validators = {
+      test: validator.isFunction
+    };
+
+    it('is valid function', () => {
+      const isValid = isValidConfig({
+        test: noop
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid function', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array Of strings', () => {
+
+    const validators = {
+      test: validator.isArrayOfStrings
+    };
+
+    it('is valid array of strings', () => {
+      const isValid = isValidConfig({
+        test: ['a', 'b', 'c']
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid array of strings', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array Of numbers', () => {
+
+    const validators = {
+      test: validator.isArrayOfNumbers
+    };
+
+    it('is valid array of numbers', () => {
+      const isValid = isValidConfig({
+        test: [1, 1, 1]
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid array of numbers', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an object', () => {
+    const validators = {
+      test: validator.isPlainObject
+    };
+
+    it('is valid object', () => {
+      const isValid = isValidConfig({
+        test: { a: 1 }
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid object', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array of object', () => {
+    const validators = {
+      test: validator.isArrayOfObjects({
+        a: validator.isString,
+        b: validator.isNumber,
+        c: validator.isBoolean
+      })
+    };
+    it('is valid array of object', () => {
+      const isValid = isValidConfig({
+        test: [{ a: 'a', b: 1, c: true }]
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid object', () => {
+      const isValid = isValidConfig({
+        test: [{ a: 'a', b: 1, c: 1 }]
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+
+  describe('or validator', () => {
+    const validators = {
+      test: validator.or(validator.isNumber, validator.isString)
+    };
+
+    it('could be a number', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('could be a string', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid or', () => {
+      const isValid = isValidConfig({
+        test: true
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+
+});

package/test/mocks/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/test/multiplayer.test.js

@@ -0,0 +1,25 @@
+describe('Multi-player tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({ width: 1280, height: 1800 });
+    await page.goto('http://localhost:3000/multiple-players.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 play', async () => {
+    page.waitFor(1500);
+    const players = await page.$$eval('video', v => v);
+    for (const player of players) {
+      const id = '#' + player.playerId + '_html5_api';
+      await page.waitFor(1500);
+      expect(await page.$eval(id, el => el.playing)).toBe(true);
+    }
+  });
+});

package/test/playlist.test.js

@@ -0,0 +1,60 @@
+describe('Playlist tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({ width: 1280, height: 800 });
+    await page.goto('http://localhost:3000/playlist.html', { waitUntil: 'load' });
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 30000);
+
+  it('Test playlist layout', async () => {
+    await page.waitForSelector('#player_html5_api', { visible: true, timeout: 35000 });
+    expect(await page.$('.cld-plw-col-player')).not.toBeNull();
+    expect(await page.$('.cld-plw-col-list')).not.toBeNull();
+  });
+
+  /*  it('Test direction', async () => {
+    await page.waitForSelector('#player_html5_api', { visible: true, timeout: 35000 });
+    expect(await page.$('.cld-plw-horizontal')).not.toBeNull();
+    expect(await page.$('.cld-plw-vertical')).toBeNull();
+    await page.select('select#changePlaylistDirection', 'vertical');
+    expect(await page.$('.cld-plw-horizontal')).toBeNull();
+    expect(await page.$('.cld-plw-vertical')).not.toBeNull();
+  });*/
+  /*  it('Test number of items', async () => {
+    await page.waitForSelector('#player_html5_api', { visible: true, timeout: 35000 });
+    let numberOfItems = await page.$eval('input#changePlaylistTotal', inp => parseInt(inp.value, 10));
+    let numberOfChildren = await page.$$eval('.cld-plw-panel-item', items => Array.from(items).length);
+    expect(numberOfChildren).toEqual(numberOfItems);
+    await page.focus('input#changePlaylistTotal');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type('3');
+    numberOfChildren = await page.$$eval('.cld-plw-panel-item', items => Array.from(items).length);
+    expect(numberOfChildren).toEqual(3);
+  });*/
+
+  /*  it('Test skin', async () => {
+    await page.waitForSelector('#player_html5_api', { visible: true, timeout: 35000 });
+    expect(await page.$('.cld-video-player-skin-dark')).not.toBeNull();
+    expect(await page.$('.cld-video-player-skin-light')).toBeNull();
+    await page.select('select#changePlaylistSkin', 'light');
+    expect(await page.$('.cld-video-player-skin-dark')).toBeNull();
+    expect(await page.$('.cld-video-player-skin-light')).not.toBeNull();
+  });*/
+
+  it('Test video change', async () => {
+    await page.waitForSelector('#player_html5_api', { visible: true, timeout: 35000 });
+    const curruntVideoUrl = await page.$eval('#player_html5_api', vid => vid.src);
+    await page.click('div.cld-plw-col-list > div > a:nth-child(2)');
+    const nextVideoUrl = await page.$eval('#player_html5_api', vid => vid.src);
+    expect(curruntVideoUrl).not.toEqual(nextVideoUrl);
+  });
+});
+
+

package/test/puppeteer/vp-env.js

@@ -0,0 +1,19 @@
+const PuppeteerEnvironment = require('jest-environment-puppeteer');
+
+class VideoPlayerEnvironment extends PuppeteerEnvironment {
+  async setup() {
+    await super.setup();
+    // Your setup
+  }
+
+  async teardown() {
+    // Your teardown
+    try {
+      await super.teardown();
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}
+
+module.exports = VideoPlayerEnvironment;

package/test/recommendations.test.js

@@ -0,0 +1,38 @@
+describe('Recommendations tests', () => {
+  beforeEach(async () => {
+    await page.setViewport({width: 1280, height: 1800});
+    await page.goto('http://localhost:3000/recommendations.html', {waitUntil: 'load'});
+    jest.setTimeout(10000);
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+  it('Test recommendations visibility', async () => {
+    await page.waitFor(1000);
+    let duration = Math.floor(await page.evaluate(() => player.duration()));
+    await page.waitFor(1000);
+    expect(await page.$eval('.vjs-recommendations-overlay', (o => o.style.visibility))).toEqual('hidden');
+    await page.evaluate((dur) => player.currentTime(dur), duration - 1);
+    await page.waitForSelector('.vjs-recommendations-overlay', {visible: true});
+    expect(await page.$eval('.vjs-recommendations-overlay', (o => o.style.visibility))).toEqual('visible');
+  });
+  it('Test recommendations click', async () => {
+    await page.waitFor(1000);
+    let duration = Math.floor(await page.evaluate(() => player.duration()));
+    let currentSrcUrl = await page.evaluate(() => player.currentSourceUrl());
+    await page.waitFor(1000);
+    await page.evaluate((dur) => player.currentTime(dur), duration - 1);
+    await page.waitFor('.vjs-recommendations-overlay', {visible: true});
+    await page.click('#player > div.vjs-recommendations-overlay > div > div > .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary > .vjs-recommendations-overlay-item-primary-image');
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    await page.waitFor(1000);
+    let recSourceUrl = await page.evaluate(() => player.currentSourceUrl());
+    expect(currentSrcUrl).not.toEqual(recSourceUrl);
+    expect(await page.$eval('#player_html5_api', el => el.playing)).toBe(true);
+  });
+});

package/test/title-bar.test.js

@@ -0,0 +1,28 @@
+describe('basic player tests', () => {
+  beforeAll(async () => {
+    jest.setTimeout(35000);
+    await page.setViewport({width: 1280, height: 800});
+    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('Test title bar title', async () => {
+    let ds = JSON.parse(await page.$eval('#player', v => v.getAttribute('data-cld-source')));
+    let titlebarTitle = await page.$eval('#player > .vjs-title-bar > .vjs-title-bar-title', t => t.textContent);
+    await expect(ds.info.title).toEqual(titlebarTitle);
+  });
+  it('Test title bar subtitle', async () => {
+    let ds = JSON.parse(await page.$eval('#player', v => v.getAttribute('data-cld-source')));
+    let sub = await page.$eval('#player > .vjs-title-bar > .vjs-title-bar-subtitle', t => t.textContent);
+    await expect(ds.info.subtitle).toEqual(sub);
+  });
+
+});
+
+

package/test/ui-conf.test.js

@@ -0,0 +1,49 @@
+describe('UI configuration tests', () => {
+  beforeAll(async () => {
+    jest.setTimeout(35000);
+    await page.setViewport({width: 1280, height: 800});
+    await page.goto('http://localhost:3000/docs/ui-config.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 +/-10 sec', async () => {
+    jest.setTimeout(35000);
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    await page.waitFor(1000);
+    await page.click('#player > div.vjs-control-bar > button.vjs-play-control.vjs-control.vjs-button');
+    let 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('#player > div.vjs-control-bar > button.vjs-control.vjs-icon-skip-10-plus.vjs-button');
+    await page.waitFor(1000);
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    let 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(time + 10);
+    await page.click('#player > div.vjs-control-bar > button.vjs-control.vjs-icon-skip-10-min.vjs-button');
+    await page.waitFor(1000);
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    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(time);
+  });
+  it('Test right click no context menu', async () => {
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    await page.waitFor(1000);
+    await page.click('#player_html5_api', {button: 'right'});
+    expect(await page.$('div.vjs-menu.vjs-context-menu-ui')).toEqual(null);
+  });
+  it('Test logo and logo click url', async () => {
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    await page.waitFor(1000);
+    let opts = await page.evaluate(() => player.videojs.options_);
+    let href = await page.$eval('#player > div.vjs-control-bar > a', (a) => a.href);
+    let backImage = await page.$eval('#player > div.vjs-control-bar > a', (a) => a.style.backgroundImage);
+    expect(opts.logoOnclickUrl).toEqual(href.slice(0, href.length - 1));
+    expect(opts.logoImageUrl).toEqual(backImage.replace('url\("', ''). replace('"\)', ''));
+  });
+});
+
+

package/test/unit/cloudinaryConfig.test.js

@@ -0,0 +1,22 @@
+import cloudinary from 'cloudinary-core';
+import VideoPlayer from '../../src/video-player';
+cloudinary.VideoPlayer = VideoPlayer;
+
+describe('secure true test', () => {
+  it('test force secure true', async () => {
+    jest.useFakeTimers();
+    const cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
+    document.body.innerHTML = '<div><video id="test"/></div>';
+    let vp = new VideoPlayer('test', { hideContextMenu: true, cloudinaryConfig: cld }, false);
+    let conf = vp.videojs.cloudinary.cloudinaryConfig().config();
+    expect(conf.secure).toEqual(true);
+  });
+  it('test explicit secure false', async () => {
+    jest.useFakeTimers();
+    const cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
+    document.body.innerHTML = '<div><video id="test"/></div>';
+    let vp = new VideoPlayer('test', { hideContextMenu: true, cloudinaryConfig: cld, secure: false }, false);
+    let conf = vp.videojs.cloudinary.cloudinaryConfig().config();
+    expect(conf.secure).toEqual(false);
+  });
+});

package/test/unit/cloudinaryUtils.test.js

@@ -0,0 +1,53 @@
+const tracks = [
+  {
+    default: false,
+    kind: 'subtitles',
+    label: 'German subtitles',
+    src: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt',
+    srclang: 'de'
+  },
+  {
+    default: false,
+    kind: 'subtitles',
+    label: 'Hebrew subtitles',
+    src: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_hebrew.vtt',
+    srclang: 'he'
+  },
+  {
+    default: false,
+    kind: 'subtitles',
+    label: 'Swedish subtitles',
+    src: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_swedish.vtt',
+    srclang: 'se'
+  }
+];
+jest.mock('fetch-ponyfill/build/fetch-browser', () => (() => {
+  return {
+    fetch: jest.fn((url, options) => {
+      return new Promise((resolve) => {
+        if (url === tracks[2].src) {
+          resolve({ status: 404 });
+        } else {
+          resolve({ status: 200 });
+        }
+      });
+    }),
+    default: jest.fn()
+  };
+}));
+import { fetch } from 'fetch-ponyfill/build/fetch-browser';
+import { filterAndAddTextTracks } from '../../src/utils/cloudinary';
+
+describe('video source tests', () => {
+  it('test filter out bad vtt', async (done) => {
+    let vjs = jest.createMockFromModule('video.js');
+    vjs.addRemoteTextTrack = jest.fn();
+    jest.spyOn(vjs, 'addRemoteTextTrack');
+    filterAndAddTextTracks(tracks, vjs);
+    setTimeout(() => {
+      expect(vjs.addRemoteTextTrack).toBeCalledTimes(2);
+      done();
+    }, 1000);
+  });
+
+});

package/test/unit/utils.test.js

@@ -0,0 +1,27 @@
+import { get } from '../../src/utils/object.js';
+
+describe('test get utils function', () => {
+  const value = { a: { b: [{ c: 2 }], d: undefined } };
+
+  it('should get primitive value', () => {
+    expect(get(value, 'a.b.0.c')).toBe(value.a.b[0].c);
+  });
+
+  it('should get object value', () => {
+    expect(get(value, 'a.b')).toBe(value.a.b);
+  });
+
+  it('should get default value', () => {
+    const defaultValue = 10;
+    expect(get(value, 'a.c', defaultValue)).toBe(defaultValue);
+  });
+
+  it('should get default value if value is undefined', () => {
+    expect(get(value, 'a.d', 10)).toBe(10);
+  });
+
+  it('should get default value if the value is not an object', () => {
+    expect(get(1, 'a.b', 12)).toBe(12);
+  });
+
+});