refactor: require videojs-vtt.js via require rather than concat (#3919)

Using aliasify and require, we can generate the dist/video.js and dist/alt/video.novtt.js files each with and without vttjs while having the require-able version of video.js available to require vttjs and have it work with bundlers like browserify and webpack.

build/grunt.js

@@ -137,10 +137,6 @@ module.exports = function(grunt) {
         ],
         tasks: ['copy:dist']
       },
-      novtt: {
-        files: ['build/temp/video.js'],
-        tasks: ['concat:novtt']
-      },
       minify: {
         files: ['build/temp/video.js'],
         tasks: ['uglify']
@@ -149,10 +145,6 @@ module.exports = function(grunt) {
         files: ['src/css/**/*'],
         tasks: ['skin']
       },
-      babel: {
-        files: ['src/js/**/*.js'],
-        tasks: ['babel:es5']
-      }
     },
     connect: {
       dev: {
@@ -326,32 +318,39 @@ module.exports = function(grunt) {
       }
     },
     browserify: {
-      options: browserifyGruntOptions(),
       build: {
+        options: browserifyGruntOptions(),
         files: {
           'build/temp/video.js': ['es5/video.js']
         }
       },
-      dist: {
+      buildnovtt: {
+        options: browserifyGruntOptions({transform: [
+          ['aliasify', {aliases: {'videojs-vtt.js': false}}]
+        ]}),
+        files: {
+          'build/temp/alt/video.novtt.js': ['es5/video.js']
+        }
+      },
+      watch: {
         options: browserifyGruntOptions({
-          transform: [
-            ['browserify-versionify', {
-              placeholder: '../node_modules/videojs-vtt.js/dist/vtt.js',
-              version: 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js'
-            }],
-          ]
+          watch: true,
+          keepAlive: true,
         }),
         files: {
           'build/temp/video.js': ['es5/video.js']
         }
       },
-      watch: {
-        options: {
+      watchnovtt: {
+        options: browserifyGruntOptions({
+          transform: [
+            ['aliasify', {aliases: {'videojs-vtt.js': false}}]
+          ],
           watch: true,
-          keepAlive: true
-        },
+          keepAlive: true,
+        }),
         files: {
-          'build/temp/video.js': ['es5/video.js']
+          'build/temp/alt/video.novtt.js': ['es5/video.js']
         }
       },
       tests: {
@@ -390,14 +389,6 @@ module.exports = function(grunt) {
       options: {
         separator: '\n'
       },
-      novtt: {
-        src: ['build/temp/video.js'],
-        dest: 'build/temp/alt/video.novtt.js'
-      },
-      vtt: {
-        src: ['build/temp/video.js', 'node_modules/videojs-vtt.js/dist/vtt.js'],
-        dest: 'build/temp/video.js'
-      },
       ie8_addition: {
         src: ['build/temp/video-js.css', 'src/css/ie8.css'],
         dest: 'build/temp/video-js.css'
@@ -408,22 +399,23 @@ module.exports = function(grunt) {
         logConcurrentOutput: true
       },
       tests: [
-        'watch:babel',
+        'shell:babel',
         'browserify:tests'
       ],
       dev: [
+        'shell:babel',
         'browserify:watch',
+        'browserify:watchnovtt',
         'browserify:tests',
-        'watch:novtt',
         'watch:skin',
-        'watch:dist',
-        'shell:babel'
+        'watch:dist'
       ],
       // Run multiple watch tasks in parallel
       // Needed so watchify can cache intelligently
       watchAll: [
         'watch',
         'browserify:watch',
+        'browserify:watchnovtt',
         'browserify:tests',
         'karma:watch'
       ],
@@ -508,14 +500,13 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('chg');
   grunt.loadNpmTasks('grunt-accessibility');
 
-  const buildDependents = [
+  grunt.registerTask('build', [
     'shell:lint',
     'clean:build',
 
     'babel:es5',
     'browserify:build',
-    'concat:novtt',
-    'concat:vtt',
+    'browserify:buildnovtt',
     'usebanner:novtt',
     'usebanner:vtt',
     'uglify',
@@ -528,18 +519,11 @@ module.exports = function(grunt) {
     'copy:swf',
     'copy:ie8',
     'vjslanguages'
-  ];
-
-  grunt.registerTask('build', buildDependents);
-
-  grunt.registerTask(
-    'build:dist',
-    buildDependents.map(task => task === 'browserify:build' ? 'browserify:dist' : task)
-  );
+  ]);
 
   grunt.registerTask('dist', [
     'clean:dist',
-    'build:dist',
+    'build',
     'copy:dist',
     'copy:examples',
     'zip:dist'
@@ -575,9 +559,7 @@ module.exports = function(grunt) {
 
   // Run while developing
   grunt.registerTask('dev', ['connect:dev', 'concurrent:dev']);
-
   grunt.registerTask('watchAll', ['build', 'connect:dev', 'concurrent:watchAll']);
-
   grunt.registerTask('test-a11y', ['copy:a11y', 'accessibility']);
 
   // Pick your testing, or run both in different terminals

package.json

@@ -46,6 +46,7 @@
     "xhr": "2.2.2"
   },
   "devDependencies": {
+    "aliasify": "^2.1.0",
     "babel-cli": "^6.11.4",
     "babel-plugin-inline-json": "^1.1.1",
     "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",

src/js/tech/tech.js

@@ -17,6 +17,7 @@ import { bufferedPercent } from '../utils/buffer.js';
 import MediaError from '../media-error.js';
 import window from 'global/window';
 import document from 'global/document';
+import {isPlain} from '../utils/obj';
 
 /**
  * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
@@ -522,13 +523,27 @@ class Tech extends Component {
    *
    * @fires Tech#vttjsloaded
    * @fires Tech#vttjserror
-   * @fires Tech#texttrackchange
    */
   addWebVttScript_() {
     if (!window.WebVTT && this.el().parentNode !== null && this.el().parentNode !== undefined) {
+      const vtt = require('videojs-vtt.js');
+
+      // load via require if available and vtt.js script location was not passed in
+      // as an option. novtt builds will turn the above require call into an empty object
+      // which will cause this if check to always fail.
+      if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {
+        Object.keys(vtt).forEach(function(k) {
+          window[k] = vtt[k];
+        });
+        this.trigger('vttjsloaded');
+        return;
+      }
+
+      // load vtt.js via the script location option or the cdn of no location was
+      // passed in
       const script = document.createElement('script');
 
-      script.src = this.options_['vtt.js'] || '../node_modules/videojs-vtt.js/dist/vtt.js';
+      script.src = this.options_['vtt.js'] || 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js';
       script.onload = () => {
         /**
          * Fired when vtt.js is loaded.