Clean up and documentation of src/js/video.js and DOM functions

CHANGELOG.md

@@ -32,6 +32,7 @@ CHANGELOG
 * @heff added support for fluid widths, aspect ratios, and metadata defaults ([view](https://github.com/videojs/video.js/pull/1952))
 * @heff reorganized all utility functions in the codebase ([view](https://github.com/videojs/video.js/pull/2139))
 * @eXon made additional tech 2.0 improvements listed in #2126 ([view](https://github.com/videojs/video.js/pull/2166))
+* @heff Cleaned up and documented src/js/video.js and DOM functions ([view](https://github.com/videojs/video.js/pull/2182))
 
 --------------------
 

package.json

@@ -24,7 +24,6 @@
   "style": "./dist/video-js.css",
   "dependencies": {
     "global": "^4.3.0",
-    "lodash.clonedeep": "^3.0.0",
     "lodash.isplainobject": "^3.0.2",
     "lodash.merge": "^3.2.1",
     "object.assign": "^2.0.1",

src/js/component.js

@@ -13,6 +13,7 @@ import toTitleCase from './utils/to-title-case.js';
 import assign from 'object.assign';
 import mergeOptions from './utils/merge-options.js';
 
+
 /**
  * Base UI Component class
  *
@@ -52,8 +53,8 @@ class Component {
       this.player_ = player;
     }
 
-    // Make a copy of prototype.options_ to protect against overriding global defaults
-    this.options_ = assign({}, this.options_);
+    // Make a copy of prototype.options_ to protect against overriding defaults
+    this.options_ = mergeOptions({}, this.options_);
 
     // Updated options with supplied options
     options = this.options(options);
@@ -130,7 +131,7 @@ class Component {
       this.el_.parentNode.removeChild(this.el_);
     }
 
-    Dom.removeData(this.el_);
+    Dom.removeElData(this.el_);
     this.el_ = null;
   }
 
@@ -741,7 +742,7 @@ class Component {
    * @return {Component}
    */
   hasClass(classToCheck) {
-    return Dom.hasClass(this.el_, classToCheck);
+    return Dom.hasElClass(this.el_, classToCheck);
   }
 
   /**
@@ -751,7 +752,7 @@ class Component {
    * @return {Component}
    */
   addClass(classToAdd) {
-    Dom.addClass(this.el_, classToAdd);
+    Dom.addElClass(this.el_, classToAdd);
     return this;
   }
 
@@ -762,7 +763,7 @@ class Component {
    * @return {Component}
    */
   removeClass(classToRemove) {
-    Dom.removeClass(this.el_, classToRemove);
+    Dom.removeElClass(this.el_, classToRemove);
     return this;
   }
 
@@ -918,19 +919,6 @@ class Component {
     // If component has display:none, offset will return 0
     // TODO: handle display:none and no dimension style using px
     return parseInt(this.el_['offset' + toTitleCase(widthOrHeight)], 10);
-
-    // ComputedStyle version.
-    // Only difference is if the element is hidden it will return
-    // the percent value (e.g. '100%'')
-    // instead of zero like offsetWidth returns.
-    // var val = Dom.getComputedStyleValue(this.el_, widthOrHeight);
-    // var pxIndex = val.indexOf('px');
-
-    // if (pxIndex !== -1) {
-    //   return val.slice(0, pxIndex);
-    // } else {
-    //   return val;
-    // }
   }
 
   /**

src/js/control-bar/mute-toggle.js

@@ -68,9 +68,9 @@ class MuteToggle extends Button {
 
     /* TODO improve muted icon classes */
     for (var i = 0; i < 4; i++) {
-      Dom.removeClass(this.el_, `vjs-vol-${i}`);
+      Dom.removeElClass(this.el_, `vjs-vol-${i}`);
     }
-    Dom.addClass(this.el_, `vjs-vol-${level}`);
+    Dom.addElClass(this.el_, `vjs-vol-${level}`);
   }
 
 }

src/js/player.js

@@ -1,4 +1,8 @@
+// Subclasses Component
 import Component from './component.js';
+
+import document from 'global/document';
+import window from 'global/window';
 import * as Events from './utils/events.js';
 import * as Dom from './utils/dom.js';
 import * as Fn from './utils/fn.js';
@@ -10,23 +14,22 @@ import { createTimeRange } from './utils/time-ranges.js';
 import { bufferedPercent } from './utils/buffer.js';
 import FullscreenApi from './fullscreen-api.js';
 import MediaError from './media-error.js';
-import Options from './options.js';
+import globalOptions from './global-options.js';
 import safeParseTuple from 'safe-json-parse/tuple';
-import window from 'global/window';
-import document from 'global/document';
 import assign from 'object.assign';
 import mergeOptions from './utils/merge-options.js';
 
-// Include required child components
+// Include required child components (importing also registers them)
 import MediaLoader from './tech/loader.js';
-import Poster from './poster-image.js';
+import PosterImage from './poster-image.js';
 import TextTrackDisplay from './tracks/text-track-display.js';
 import LoadingSpinner from './loading-spinner.js';
 import BigPlayButton from './big-play-button.js';
-import controlBar from './control-bar/control-bar.js';
+import ControlBar from './control-bar/control-bar.js';
 import ErrorDisplay from './error-display.js';
 import TextTrackSettings from './tracks/text-track-settings.js';
-// Require html5 for disposing the original video tag
+
+// Require html5 tech, at least for disposing the original video tag
 import Html5 from './tech/html5.js';
 
 /**
@@ -99,13 +102,13 @@ class Player extends Component {
     this.tag = tag; // Store the original tag used to set options
 
     // Store the tag attributes used to restore html5 element
-    this.tagAttributes = tag && Dom.getElementAttributes(tag);
+    this.tagAttributes = tag && Dom.getElAttributes(tag);
 
     // Update Current Language
-    this.language_ = options['language'] || Options['language'];
+    this.language_ = options['language'] || globalOptions['language'];
 
     // Update Supported Languages
-    this.languages_ = options['languages'] || Options['languages'];
+    this.languages_ = options['languages'] || globalOptions['languages'];
 
     // Cache for video property values.
     this.cache_ = {};
@@ -211,7 +214,7 @@ class Player extends Component {
 
     // Copy over all the attributes from the tag, including ID and class
     // ID will now reference player box, not the video tag
-    const attrs = Dom.getElementAttributes(tag);
+    const attrs = Dom.getElAttributes(tag);
 
     Object.getOwnPropertyNames(attrs).forEach(function(attr){
       // workaround so we don't totally break IE7
@@ -246,15 +249,15 @@ class Player extends Component {
     this.fluid(this.options_['fluid']);
     this.aspectRatio(this.options_['aspectRatio']);
 
-    // insertFirst seems to cause the networkState to flicker from 3 to 2, so
+    // insertElFirst seems to cause the networkState to flicker from 3 to 2, so
     // keep track of the original for later so we can know if the source originally failed
     tag.initNetworkState_ = tag.networkState;
 
     // Wrap video tag in div (el/box) container
     if (tag.parentNode) {
       tag.parentNode.insertBefore(el, tag);
     }
-    Dom.insertFirst(tag, el); // Breaks iPhone, fixed in HTML5 setup.
+    Dom.insertElFirst(tag, el); // Breaks iPhone, fixed in HTML5 setup.
 
     this.el_ = el;
 
@@ -479,7 +482,7 @@ class Player extends Component {
     // Add the tech element in the DOM if it was not already there
     // Make sure to not insert the original video element if using Html5
     if (this.tech.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) {
-      Dom.insertFirst(this.tech.el(), this.el());
+      Dom.insertElFirst(this.tech.el(), this.el());
     }
 
     // Get rid of the original video tag reference after the first tech is loaded
@@ -1376,7 +1379,7 @@ class Player extends Component {
     document.documentElement.style.overflow = 'hidden';
 
     // Apply fullscreen styles
-    Dom.addClass(document.body, 'vjs-full-window');
+    Dom.addElClass(document.body, 'vjs-full-window');
 
     this.trigger('enterFullWindow');
   }
@@ -1399,7 +1402,7 @@ class Player extends Component {
     document.documentElement.style.overflow = this.docOrigOverflow;
 
     // Remove fullscreen styles
-    Dom.removeClass(document.body, 'vjs-full-window');
+    Dom.removeElClass(document.body, 'vjs-full-window');
 
     // Resize the box, controller, and poster to original sizes
     // this.positionAll();
@@ -2116,7 +2119,7 @@ class Player extends Component {
       'tracks': []
     };
 
-    const tagOptions = Dom.getElementAttributes(tag);
+    const tagOptions = Dom.getElAttributes(tag);
     const dataSetup = tagOptions['data-setup'];
 
     // Check if data-setup attr exists.
@@ -2141,9 +2144,9 @@ class Player extends Component {
         // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
         const childName = child.nodeName.toLowerCase();
         if (childName === 'source') {
-          baseOptions['sources'].push(Dom.getElementAttributes(child));
+          baseOptions['sources'].push(Dom.getElAttributes(child));
         } else if (childName === 'track') {
-          baseOptions['tracks'].push(Dom.getElementAttributes(child));
+          baseOptions['tracks'].push(Dom.getElAttributes(child));
         }
       }
     }
@@ -2168,7 +2171,7 @@ Player.players = {};
  * @type {Object}
  * @private
  */
-Player.prototype.options_ = Options;
+Player.prototype.options_ = globalOptions;
 
 /**
  * Fired when the player has initial duration and dimension information

src/js/plugins.js

@@ -1,7 +1,7 @@
-import Player from './player';
+import Player from './player.js';
 
 /**
- * the method for registering a video.js plugin
+ * The method for registering a video.js plugin
  *
  * @param  {String} name The name of the plugin
  * @param  {Function} init The function that is run when the player inits

src/js/slider/slider.js

@@ -160,7 +160,7 @@ class Slider extends Component {
 
   calculateDistance(event){
     let el = this.el_;
-    let box = Dom.findPosition(el);
+    let box = Dom.findElPosition(el);
     let boxW = el.offsetWidth;
     let boxH = el.offsetHeight;
     let handle = this.handle;

src/js/tech/flash.js

@@ -267,7 +267,7 @@ Flash.formats = {
 };
 
 Flash.onReady = function(currSwf){
-  let el = Dom.el(currSwf);
+  let el = Dom.getEl(currSwf);
   let tech = el && el.tech;
 
   // if there is no el then the tech has been disposed
@@ -300,13 +300,13 @@ Flash.checkReady = function(tech){
 
 // Trigger events from the swf on the player
 Flash.onEvent = function(swfID, eventName){
-  let tech = Dom.el(swfID).tech;
+  let tech = Dom.getEl(swfID).tech;
   tech.trigger(eventName);
 };
 
 // Log errors from the swf
 Flash.onError = function(swfID, err){
-  const tech = Dom.el(swfID).tech;
+  const tech = Dom.getEl(swfID).tech;
   const msg = 'FLASH: '+err;
 
   if (err === 'srcnotfound') {

src/js/tech/html5.js

@@ -101,13 +101,13 @@ class Html5 extends Tech {
         el = document.createElement('video');
 
         // determine if native controls should be used
-        let tagAttributes = this.options_.tag && Dom.getElementAttributes(this.options_.tag);
+        let tagAttributes = this.options_.tag && Dom.getElAttributes(this.options_.tag);
         let attributes = mergeOptions({}, tagAttributes);
         if (!browser.TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) {
           delete attributes.controls;
         }
 
-        Dom.setElementAttributes(el,
+        Dom.setElAttributes(el,
           assign(attributes, {
             id: this.options_.techId,
             class: 'vjs-tech'
@@ -139,7 +139,7 @@ class Html5 extends Tech {
       if (typeof this.options_[attr] !== 'undefined') {
         overwriteAttrs[attr] = this.options_[attr];
       }
-      Dom.setElementAttributes(el, overwriteAttrs);
+      Dom.setElAttributes(el, overwriteAttrs);
     }
 
     return el;