Cld 10501 upgrade videojs v7 (#62)

* video.js 7 upgrade

* tests fixes

* webpack fixes

* example fix

package.json

@@ -24,18 +24,16 @@
   "main": "./dist/cld-video-player.js",
   "style": "./dist/cld-video-player.css",
   "dependencies": {
-    "expose-loader": "^0.7.4",
+    "expose-loader": "^0.7.5",
     "fetch-ponyfill": "^4.0.0",
     "get-size": "^2.0.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "promise-polyfill": "^6.0.2",
-    "video.js": "^6.9.0",
+    "video.js": "^7.4.1",
     "videojs-contextmenu": "^1.2.2",
-    "videojs-contrib-ads": "^6.2.0",
-    "videojs-contrib-hls": "^5.14.1",
-    "videojs-contrib-media-sources": "^4.4.2",
+    "videojs-contrib-ads": "^6.6.1",
     "videojs-ima": "^1.5.1",
-    "videojs-per-source-behaviors": "^1.1.3",
+    "videojs-per-source-behaviors": "^2.1.0",
     "webfontloader": "^1.6.28",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-conditional-loader": "^1.0.11",
@@ -81,7 +79,7 @@
     "uglify-js": "^3.4.7",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.7",
-    "webpack": "^2.2.1",
+    "webpack": "^2.7.0",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "^2.6.1",
     "webpack-shell-plugin": "^0.5.0"

src/plugins/ima/index.js

@@ -20,7 +20,7 @@
 
 (function(factory) {
   if (typeof define === 'function' && define['amd']) {
-    define(['video.js', 'videojs-contrib-ads'], function(videojs){ factory(window, document, videojs) });
+    define(['video.js', 'videojs-contrib-ads'], function(videojs){ factory(window, document, videojs.default) });
   } else if (typeof exports === 'object' && typeof module === 'object') {
     var vjs = require('video.js');
     require('videojs-contrib-ads');

src/plugins/index.js

@@ -1,7 +1,6 @@
 // #if (!process.env.WEBPACK_BUILD_LIGHT)
 import 'videojs-contrib-ads';
 import './ima';
-import 'videojs-contrib-hls';
 // #endif
 import 'videojs-per-source-behaviors';
 import autoplayOnScroll from './autoplay-on-scroll';

src/video-player.js

@@ -40,6 +40,7 @@ Object.keys(plugins).forEach((key) => {
   videojs.registerPlugin(key, plugins[key]);
 });
 
+
 const normalizeAutoplay = (options) => {
   const autoplayMode = options.autoplayMode;
   if (autoplayMode) {

static/examples/adaptive-streaming.html

@@ -110,8 +110,8 @@ <h3 class="text-primary mt-5">Example Code:</h3>
   <!-- Cloudinary Video Player Dependencies -->
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js"></script>
   <script type="text/javascript" src="/cld-video-player.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.2/videojs-dash.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.2/dash.all.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.10.0/videojs-dash.min.js"></script>
 
   <!-- Actual code -->
   <script type="text/javascript">

static/examples/components.html

@@ -232,10 +232,10 @@ <h3 class="text-primary mt-5 mb-5">Example Code:</h3>
     // ===============================================
 
     // Get the ClickableComponent base class from Video.js
-    var ClickableComponent = videojs.getComponent('ClickableComponent');
+    var ClickableComponent = videojs.default.getComponent('ClickableComponent');
 
     // Create a common class for playlist buttons
-    var PlaylistButton = videojs.extend(ClickableComponent, {
+    var PlaylistButton = videojs.default.extend(ClickableComponent, {
       constructor: function(player, options) {
         var type = options.type;
         if (!type && type != 'previous' && type != 'next') {
@@ -253,7 +253,7 @@ <h3 class="text-primary mt-5 mb-5">Example Code:</h3>
       createEl: function() {
         var typeCssClass = 'vjs-playlist-' + this.type + '-control';
 
-        return videojs.createEl('button', {
+        return videojs.default.createEl('button', {
 
           // Prefixing classes of elements within a player with "vjs-"
           // is a convention used in Video.js.
@@ -263,7 +263,7 @@ <h3 class="text-primary mt-5 mb-5">Example Code:</h3>
     });
 
     // Create the NextButton component
-    var NextButton = videojs.extend(PlaylistButton, {
+    var NextButton = videojs.default.extend(PlaylistButton, {
       constructor: function(player, options) {
         PlaylistButton.apply(this, [player, { type: 'next' }]);
       },
@@ -278,7 +278,7 @@ <h3 class="text-primary mt-5 mb-5">Example Code:</h3>
     });
 
     // Create the PreviousButton component
-    var PreviousButton = videojs.extend(PlaylistButton, {
+    var PreviousButton = videojs.default.extend(PlaylistButton, {
       constructor: function(player, options) {
         PlaylistButton.apply(this, [player, { type: 'previous' }]);
       },
@@ -290,8 +290,8 @@ <h3 class="text-primary mt-5 mb-5">Example Code:</h3>
     });
 
     // Register the component with Video.js, so it can be used in players.
-    videojs.registerComponent('NextButton', NextButton);
-    videojs.registerComponent('PreviousButton', PreviousButton);
+    videojs.default.registerComponent('NextButton', NextButton);
+    videojs.default.registerComponent('PreviousButton', PreviousButton);
 
     // Cloudinary Video Player related code
     // ====================================

test/analytics.test.js

@@ -8,11 +8,10 @@ describe('Analytics tests', () => {
     // parameter Interceptor
     paramInterceptor = new RequestInterceptor((testee, keyword) => {
       let urlObj = new URL(testee);
-      console.log(urlObj.searchParams);
       return urlObj.searchParams.get('ea') === keyword;
-    }, console);
+    });
     await page.setRequestInterception(true);
-    await page.setViewport({ width: 1280, height: 800 });
+    await page.setViewport({ width: 1280, height: 1800 });
   }, 35000);
   it('Analytics requests', async () => {
     jest.setTimeout(35000);
@@ -53,17 +52,16 @@ describe('Analytics tests', () => {
     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('#example-player > div.vjs-control-bar > div.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button');
+    await page.click('#example-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);
-      console.log(urlObj.searchParams);
       let event = urlObj.searchParams.get('ea');
       return event !== null && event.includes(keyword);
-    }, console);
+    });
     let spy = new RequestSpy('Percents Played');
     fussyParamInterceptor.addSpy(spy);
     await page.on('request', fussyParamInterceptor.intercept.bind(fussyParamInterceptor));
@@ -76,10 +74,9 @@ describe('Analytics tests', () => {
     jest.setTimeout(35000);
     let fussyParamInterceptor = new RequestInterceptor((testee, keyword) => {
       let urlObj = new URL(testee);
-      console.log(urlObj.searchParams);
       let event = urlObj.searchParams.get('ea');
       return event !== null && event.includes(keyword);
-    }, console);
+    });
     let spy = new RequestSpy('Seek');
     fussyParamInterceptor.addSpy(spy);
     await page.on('request', fussyParamInterceptor.intercept.bind(fussyParamInterceptor));
@@ -96,7 +93,7 @@ describe('Analytics tests', () => {
     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('#example-player > div.vjs-control-bar > button.vjs-fullscreen-control.vjs-control.vjs-button');
+    await page.click('#example-player > .vjs-control-bar > button.vjs-fullscreen-control.vjs-control.vjs-button');
     await page.waitFor(500);
     expect(spy.hasMatch()).toBe(true);
   });

test/api.test.js

@@ -1,6 +1,6 @@
 describe('API player tests', () => {
   beforeEach(async () => {
-    await page.setViewport({width: 1280, height: 800});
+    await page.setViewport({width: 1280, height: 1800});
     await page.goto('http://localhost:3000/api.html', {waitUntil: 'load'});
     await page.evaluate(() => {
       Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
@@ -14,20 +14,20 @@ describe('API player tests', () => {
   it('Test forward 10 seconds', async () => {
     await page.click('#example-player > div.vjs-control-bar > button.vjs-play-control.vjs-control');
     await page.waitFor(500);
-    let time = await page.$eval('#example-player > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control > div.vjs-current-time-display', vt => Number(vt.textContent.replace('0:', '')));
+    let time = await page.$eval('#example-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.waitFor(500);
-    let newtime = await page.$eval('#example-player > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control > div.vjs-current-time-display', vt => Number(vt.textContent.replace('0:', '')));
+    let newtime = await page.$eval('#example-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);
   });
   it('Test back 10 seconds', async () => {
-    await page.click('#example-player > div.vjs-control-bar > button.vjs-play-control.vjs-control');
+    await page.click('#example-player > .vjs-control-bar > button.vjs-play-control.vjs-control');
     await page.waitFor(500);
     await page.click('#vid-seek-plus');
     await page.waitFor(500);
     await page.click('#vid-seek-minus');
     await page.waitFor(500);
-    let newtime = await page.$eval('#example-player > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control > div.vjs-current-time-display', vt => Number(vt.textContent.replace('0:', '')));
+    let newtime = await page.$eval('#example-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 () => {
@@ -41,17 +41,21 @@ describe('API player tests', () => {
   });
   it('Test volume down', async () => {
     await page.waitFor(500);
-    let currentVol = await page.$$eval('#example-player_html5_api', v => v.volume);
+    await page.click('#vid-unmute');
+    await page.waitFor(500);
+    let currentVol = await page.$eval('#example-player_html5_api', v => v.volume);
     await page.click('#vid-volume-minus');
     await page.waitFor(500);
-    expect(await page.$$eval('#example-player_html5_api', v => v.volume)).toBe(currentVol - 0.1);
+    expect(await page.$eval('#example-player_html5_api', v => v.volume)).toBe(currentVol - 0.1);
   });
   it('Test volume up', async () => {
     await page.waitFor(500);
-    let currentVol = await page.$$eval('#example-player_html5_api', v => v.volume);
+    await page.click('#vid-unmute');
+    await page.waitFor(500);
+    let currentVol = await page.$eval('#example-player_html5_api', v => v.volume);
     await page.click('#vid-volume-plus');
     await page.waitFor(500);
-    expect(await page.$$eval('#example-player_html5_api', v => v.volume)).toBe(currentVol + 0.1);
+    expect(await page.$eval('#example-player_html5_api', v => v.volume)).toBe(currentVol + 0.1);
   });
   it('Test pause', async () => {
     await page.waitFor(500);
@@ -61,7 +65,7 @@ describe('API player tests', () => {
   });
   it('Test play', async () => {
     await page.waitFor(500);
-    await page.click('#example-player > div.vjs-control-bar > button.vjs-play-control.vjs-control');
+    await page.click('#example-player > .vjs-control-bar > button.vjs-play-control.vjs-control');
     await page.waitFor(500);
     expect(await page.$eval('#example-player video', el => el.playing)).toBe(false);
     await page.waitFor(500);
@@ -76,10 +80,10 @@ describe('API player tests', () => {
   });
   it('Test hide controls', async () => {
     await page.waitFor(500);
-    expect(await page.$eval('#example-player > div.vjs-control-bar', p => p.offsetWidth)).toBeGreaterThan(0);
+    expect(await page.$eval('#example-player > .vjs-control-bar', p => p.offsetWidth)).toBeGreaterThan(0);
     await page.click('#vid-toggle-controls');
     await page.waitFor(500);
-    expect(await page.$eval('#example-player > div.vjs-control-bar', p => p.offsetWidth)).toBe(0);
+    expect(await page.$eval('#example-player > .vjs-control-bar', p => p.offsetWidth)).toBe(0);
   });
   it('Test fullscreen', async () => {
     await page.waitFor(500);

test/basic-ui.test.js

@@ -38,7 +38,7 @@ describe('basic player tests', () => {
     await page.waitFor(500);
     let playing = await page.$eval('#example-player video', el => el.playing);
     await expect(playing).toBe(true);
-    await page.click('#example-player > div.vjs-control-bar > button.vjs-play-control.vjs-control');
+    await page.click('#example-player > .vjs-control-bar > button.vjs-play-control.vjs-control');
     await page.waitFor(500);
     playing = await page.$eval('#example-player video', el => el.playing);
     await expect(playing).toBe(false);
@@ -48,15 +48,15 @@ describe('basic player tests', () => {
     await page.click('#example-player > button.vjs-big-play-button');
     await page.waitFor(500);
     expect(await page.$eval('#example-player video', v => v.muted)).toBe(true);
-    await page.click('#example-player > div.vjs-control-bar > div.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button');
+    await page.click('#example-player > .vjs-control-bar > .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button');
     expect(await page.$eval('#example-player video', v => v.muted)).toBe(false);
   });
   it('Test video time', async () => {
     await page.waitForSelector('.vjs-big-play-button');
     await page.click('#example-player > button.vjs-big-play-button');
     await page.waitFor(2000);
-    let time = await page.$eval('#example-player > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control > div.vjs-current-time-display', vt => Number(vt.textContent.replace(':', '')));
+    let time = await page.$eval('#example-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('#example-player > div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control > div.vjs-current-time-display', vt => Number(vt.textContent.replace(':', '')))).toBeGreaterThan(time);
+    expect(await page.$eval('#example-player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display', vt => Number(vt.textContent.replace(':', '')))).toBeGreaterThan(time);
   });
 });

test/multiplayer.test.js

@@ -1,6 +1,6 @@
 describe('Multi-player tests', () => {
   beforeEach(async () => {
-    await page.setViewport({width: 1280, height: 800});
+    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', {
@@ -13,9 +13,10 @@ describe('Multi-player tests', () => {
   }, 10000);
   it('Test play', async () => {
     page.waitFor(1500);
-    const ids = ['#vjs_video_3_html5_api', '#vjs_video_626_html5_api', '#vjs_video_1140_html5_api'];
-    for (const id of ids) {
-      page.waitFor(1000);
+    const players = await page.$$eval('video', v => v);
+    for (const player of players) {
+      let id = '#' + player.playerId + '_html5_api';
+      await page.waitFor(1500);
       expect(await page.$eval(id, el => el.playing)).toBe(true);
     }
   });

test/playlist.test.js

@@ -10,7 +10,7 @@ describe('Playlist tests', () => {
         }
       });
     });
-  }, 10000);
+  }, 30000);
 
   it('Test playlist layout', async () => {
     await page.waitForSelector('#example-player_html5_api', { visible: true, timeout: 35000 });

test/recommendations.test.js

@@ -1,6 +1,6 @@
 describe('Recommendations tests', () => {
   beforeEach(async () => {
-    await page.setViewport({width: 1280, height: 800});
+    await page.setViewport({width: 1280, height: 1800});
     await page.goto('http://localhost:3000/recommendations.html', {waitUntil: 'load'});
     await page.evaluate(() => {
       Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
@@ -25,7 +25,7 @@ describe('Recommendations tests', () => {
     await page.waitFor(1000);
     await page.evaluate((dur) => player.currentTime(dur), duration - 1);
     await page.waitFor('.vjs-recommendations-overlay', {visible: true});
-    await page.click('#example-player > div.vjs-recommendations-overlay > div > div > div.vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary > div.vjs-recommendations-overlay-item-primary-image');
+    await page.click('#example-player > div.vjs-recommendations-overlay > div > div > .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary > .vjs-recommendations-overlay-item-primary-image');
     await page.waitFor(1000);
     let recSourceUrl = await page.evaluate(() => player.currentSourceUrl());
     expect(currentSrcUrl).not.toEqual(recSourceUrl);

test/title-bar.test.js

@@ -14,12 +14,12 @@ describe('basic player tests', () => {
   }, 10000);
   it('Test title bar title', async () => {
     let ds = JSON.parse(await page.$eval('#example-player', v => v.getAttribute('data-cld-source')));
-    let titlebarTitle = await page.$eval('#example-player > div.vjs-title-bar > div.vjs-title-bar-title', t => t.textContent);
+    let titlebarTitle = await page.$eval('#example-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('#example-player', v => v.getAttribute('data-cld-source')));
-    let sub = await page.$eval('#example-player > div.vjs-title-bar > div.vjs-title-bar-subtitle', t => t.textContent);
+    let sub = await page.$eval('#example-player > .vjs-title-bar > .vjs-title-bar-subtitle', t => t.textContent);
     await expect(ds.info.subtitle).toEqual(sub);
   });
 

webpack/common.config.js

@@ -39,10 +39,8 @@ module.exports = {
     alias: {
       'video.js': path.resolve(__dirname, '../node_modules/video.js'),
       'webworkify': 'webworkify-webpack2',
-      'videojs-contrib-media-sources$': path.resolve(__dirname, '../node_modules/videojs-contrib-media-sources'),
       'videojs-contrib-ads': path.resolve(__dirname, '../node_modules/videojs-contrib-ads/dist/videojs-contrib-ads.min.js'),
-      'videojs-ima': path.resolve(__dirname, '../node_modules/videojs-ima/dist/videojs-ima.min.js'),
-      'videojs-contrib-hls': path.resolve(__dirname, '../node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js')
+      'videojs-ima': path.resolve(__dirname, '../node_modules/videojs-ima/dist/videojs-ima.min.js')
     }
   },
 
@@ -106,8 +104,13 @@ module.exports = {
         use: 'url-loader?limit=10000'
       },
       {
-        test: require.resolve('video.js'),
-        use: 'expose-loader?videojs'
+        test: path.resolve(__dirname, '../node_modules/video.js'),
+        use: [
+          {
+            loader: 'expose-loader',
+            options: 'videojs'
+          }
+        ]
       }
     ]
   },