Add type annotations to media_controls.js.

ui/file_manager/video_player/js/media_controls.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview MediaControls class implements media playback controls
  * that exist outside of the audio/video HTML element.
  */
 
 /**
  * @param {HTMLElement} containerElement The container for the controls.

[hirono, 2014/12/24 01:43:22]

nit: !HTMLElement

[yawano, 2014/12/24 02:39:55]

Done.

- * @param {function} onMediaError Function to display an error message.
+ * @param {function(Event)} onMediaError Function to display an error message.
  * @constructor
+ * @struct
  */
 function MediaControls(containerElement, onMediaError) {
   this.container_ = containerElement;
   this.document_ = this.container_.ownerDocument;
   this.media_ = null;
 
   this.onMediaPlayBound_ = this.onMediaPlay_.bind(this, true);
   this.onMediaPauseBound_ = this.onMediaPlay_.bind(this, false);
   this.onMediaDurationBound_ = this.onMediaDuration_.bind(this);
   this.onMediaProgressBound_ = this.onMediaProgress_.bind(this);
   this.onMediaError_ = onMediaError || function() {};
 
   this.savedVolume_ = 1;  // 100% volume.
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.playButton_ = null;
+
+  /**
+   * @type {MediaControls.Slider}
+   * @private
+   */
+  this.progressSlider_ = null;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.duration_ = null;
+
+  /**
+   * @type {MediaControls.AnimatedSlider}
+   * @private
+   */
+  this.volume_ = null;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.textBanner_ = null;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.soundButton_ = null;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.resumeAfterDrag_ = false;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.currentTime_ = null;
 }
 
 /**
  * Button's state types. Values are used as CSS class names.
  * @enum {string}
  */
 MediaControls.ButtonStateType = {
   DEFAULT: 'default',
   PLAYING: 'playing',
   ENDED: 'ended'
@@ skipping 22 matching lines @@
   if (seconds < 10) result += '0';
   result += seconds;
   return result;
 };
 
 /**
  * Create a custom control.
  *
  * @param {string} className Class name.
  * @param {HTMLElement=} opt_parent Parent element or container if undefined.
- * @return {HTMLElement} The new control element.
+ * @return {!HTMLElement} The new control element.
  */
 MediaControls.prototype.createControl = function(className, opt_parent) {
   var parent = opt_parent || this.container_;
-  var control = this.document_.createElement('div');
+  var control = assertInstanceof(this.document_.createElement('div'),
+      HTMLDivElement);
   control.className = className;
   parent.appendChild(control);
   return control;
 };
 
 /**
  * Create a custom button.
  *
  * @param {string} className Class name.
- * @param {function(Event)} handler Click handler.
+ * @param {function(Event)=} opt_handler Click handler.
  * @param {HTMLElement=} opt_parent Parent element or container if undefined.
  * @param {number=} opt_numStates Number of states, default: 1.
- * @return {HTMLElement} The new button element.
+ * @return {!HTMLElement} The new button element.
  */
 MediaControls.prototype.createButton = function(
-    className, handler, opt_parent, opt_numStates) {
+    className, opt_handler, opt_parent, opt_numStates) {
   opt_numStates = opt_numStates || 1;
 
   var button = this.createControl(className, opt_parent);
   button.classList.add('media-button');
-  button.addEventListener('click', handler);
 
   var stateTypes = Object.keys(MediaControls.ButtonStateType);
   for (var state = 0; state != opt_numStates; state++) {
     var stateClass = MediaControls.ButtonStateType[stateTypes[state]];
     this.createControl('normal ' + stateClass, button);
     this.createControl('hover ' + stateClass, button);
     this.createControl('active ' + stateClass, button);
   }
   this.createControl('disabled', button);
 
   button.setAttribute('state', MediaControls.ButtonStateType.DEFAULT);
-  button.addEventListener('click', handler);
+
+  if (opt_handler)
+    button.addEventListener('click', opt_handler);
+
   return button;
 };
 
 /**
  * Enable/disable controls matching a given selector.
  *
  * @param {string} selector CSS selector.
  * @param {boolean} on True if enable, false if disable.
  * @private
  */
@@ skipping 29 matching lines @@
   if (!this.media_)
     return;  // Media is detached.
 
   this.media_.pause();
 };
 
 /**
  * @return {boolean} True if the media is currently playing.
  */
 MediaControls.prototype.isPlaying = function() {
-  return this.media_ && !this.media_.paused && !this.media_.ended;
+  return !!this.media_ && !this.media_.paused && !this.media_.ended;
 };
 
 /**
  * Toggle play/pause.
  */
 MediaControls.prototype.togglePlayState = function() {
   if (this.isPlaying())
     this.pause();
   else
     this.play();
 };
 
 /**
- * Toggle play/pause state on a mouse click on the play/pause button. Can be
- * called externally. TODO(mtomasz): Remove it. http://www.crbug.com/254318.
+ * Toggle play/pause state on a mouse click on the play/pause button.

[hirono, 2014/12/24 01:43:22]

nit: Toggle -> Toggles

[yawano, 2014/12/24 02:39:55]

Done.

  *
- * @param {Event=} opt_event Mouse click event.
+ * @param {Event} event Mouse click event.
  */
-MediaControls.prototype.onPlayButtonClicked = function(opt_event) {
+MediaControls.prototype.onPlayButtonClicked = function(event) {
   this.togglePlayState();
 };
 
 /**
  * @param {HTMLElement=} opt_parent Parent container.
  */
 MediaControls.prototype.initPlayButton = function(opt_parent) {
   this.playButton_ = this.createButton('play media-control',
       this.onPlayButtonClicked.bind(this), opt_parent, 3 /* States. */);
 };
@@ skipping 248 matching lines @@
   else
     sliderContainer.classList.add('readonly');
 
   var valueToString = function(value) {
     var duration = this.media_ ? this.media_.duration : 0;
     return MediaControls.formatTime_(this.media_.duration * value);
   }.bind(this);
 
   this.duration_.textContent = valueToString(1);
 
-  if (this.progressSlider_.setValueToStringFunction)
-    this.progressSlider_.setValueToStringFunction(valueToString);
+  this.progressSlider_.setValueToStringFunction(valueToString);
 
   if (this.media_.seekable)
     this.restorePlayState();
 };
 
 /**
  * 'timeupdate' event handler.
  * @private
  */
 MediaControls.prototype.onMediaProgress_ = function() {
@@ skipping 93 matching lines @@
 
 /**
  * Create a customized slider control.
  *
  * @param {HTMLElement} container The containing div element.
  * @param {number} value Initial value [0..1].
  * @param {number} range Number of distinct slider positions to be supported.
  * @param {function(number)} onChange Value change handler.
  * @param {function(boolean)} onDrag Drag begin/end handler.
  * @constructor
+ * @struct
  */
 
 MediaControls.Slider = function(container, value, range, onChange, onDrag) {
   this.container_ = container;
   this.onChange_ = onChange;
   this.onDrag_ = onDrag;
 
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.isDragging_ = false;
+
   var document = this.container_.ownerDocument;
 
   this.container_.classList.add('custom-slider');
 
-  this.input_ = document.createElement('input');
+  this.input_ = assertInstanceof(document.createElement('input'),
+      HTMLInputElement);
   this.input_.type = 'range';
-  this.input_.min = 0;
-  this.input_.max = range;
-  this.input_.value = value * range;
+  this.input_.min = (0).toString();
+  this.input_.max = range.toString();
+  this.input_.value = (value * range).toString();
   this.container_.appendChild(this.input_);
 
   this.input_.addEventListener(
       'change', this.onInputChange_.bind(this));
   this.input_.addEventListener(
       'mousedown', this.onInputDrag_.bind(this, true));
   this.input_.addEventListener(
       'mouseup', this.onInputDrag_.bind(this, false));
 
-  this.bar_ = document.createElement('div');
+  this.bar_ = assertInstanceof(document.createElement('div'), HTMLDivElement);
   this.bar_.className = 'bar';
   this.container_.appendChild(this.bar_);
 
   this.filled_ = document.createElement('div');
   this.filled_.className = 'filled';
   this.bar_.appendChild(this.filled_);
 
   var leftCap = document.createElement('div');
   leftCap.className = 'cap left';
   this.bar_.appendChild(leftCap);
@@ skipping 63 matching lines @@
   return this.input_.value / this.input_.max;
 };
 
 /**
  * Update the UI with the current value.
  *
  * @param {number} value [0..1].
  * @private
  */
 MediaControls.Slider.prototype.setValueToUI_ = function(value) {
-  this.input_.value = value * this.input_.max;
+  this.input_.value = (value * this.input_.max).toString();
   this.setFilled_(value);
 };
 
 /**
  * Compute the proportion in which the given position divides the slider bar.
  *
  * @param {number} position in pixels.
  * @return {number} [0..1] proportion.
  */
 MediaControls.Slider.prototype.getProportion = function(position) {
   var rect = this.bar_.getBoundingClientRect();
   return Math.max(0, Math.min(1, (position - rect.left) / rect.width));
 };
 
 /**
+ * Set value formatting function.

[hirono, 2014/12/24 01:43:22]

nit: Sets

[yawano, 2014/12/24 02:39:55]

Done.

+ * @param {function(number):string} func Value formatting function.
+ */
+MediaControls.Slider.prototype.setValueToStringFunction = function(func) {};
+
+/**
  * 'change' event handler.
  * @private
  */
 MediaControls.Slider.prototype.onInputChange_ = function() {
   this.value_ = this.getValueFromUI_();
   this.setFilled_(this.value_);
   this.onChange_(this.value_);
 };
 
 /**
@@ skipping 22 matching lines @@
 };
 
 /**
  * Create a customized slider with animated thumb movement.
  *
  * @param {HTMLElement} container The containing div element.
  * @param {number} value Initial value [0..1].
  * @param {number} range Number of distinct slider positions to be supported.
  * @param {function(number)} onChange Value change handler.
  * @param {function(boolean)} onDrag Drag begin/end handler.
- * @param {function(number):string} formatFunction Value formatting function.
  * @constructor
+ * @struct
+ * @extends {MediaControls.Slider}
  */
 MediaControls.AnimatedSlider = function(
-    container, value, range, onChange, onDrag, formatFunction) {
+    container, value, range, onChange, onDrag) {
   MediaControls.Slider.apply(this, arguments);
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.animationInterval_ = 0;
 };
 
 MediaControls.AnimatedSlider.prototype = {
   __proto__: MediaControls.Slider.prototype
 };
 
 /**
  * Number of animation steps.
  */
 MediaControls.AnimatedSlider.STEPS = 10;
@@ skipping 30 matching lines @@
  *
  * The time value is shown above the slider bar at the mouse position.
  *
  * @param {HTMLElement} container The containing div element.
  * @param {number} value Initial value [0..1].
  * @param {number} range Number of distinct slider positions to be supported.
  * @param {function(number)} onChange Value change handler.
  * @param {function(boolean)} onDrag Drag begin/end handler.
  * @param {function(number):string} formatFunction Value formatting function.
  * @constructor
+ * @struct
+ * @extends {MediaControls.Slider}
  */
 MediaControls.PreciseSlider = function(
     container, value, range, onChange, onDrag, formatFunction) {
   MediaControls.Slider.apply(this, arguments);
 
   var doc = this.container_.ownerDocument;
 
   /**
-   * @type {function(number):string}
+   * @type {number}
+   * @private
+   */
+  this.latestMouseUpTime_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.seekMarkTimer_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.latestSeekRatio_ = 0;
+
+  /**
+   * @type {?function(number):string}
    * @private
    */
   this.valueToString_ = null;
 
   this.seekMark_ = doc.createElement('div');
   this.seekMark_.className = 'seek-mark';
   this.getBar().appendChild(this.seekMark_);
 
   this.seekLabel_ = doc.createElement('div');
   this.seekLabel_.className = 'seek-label';
@@ skipping 23 matching lines @@
  * Hide the seek mark for this long after changing the position with a drag.
  */
 MediaControls.PreciseSlider.HIDE_AFTER_DRAG_DELAY = 750;
 
 /**
  * Default hide timeout (no hiding).
  */
 MediaControls.PreciseSlider.NO_AUTO_HIDE = 0;
 
 /**
- * @param {function(number):string} func Value formatting function.
+ * @override
  */
 MediaControls.PreciseSlider.prototype.setValueToStringFunction =
     function(func) {
   this.valueToString_ = func;
 
   /* It is not completely accurate to assume that the max value corresponds
    to the longest string, but generous CSS padding will compensate for that. */
   var labelWidth = this.valueToString_(1).length / 2 + 1;
   this.seekLabel_.style.width = labelWidth + 'em';
   this.seekLabel_.style.marginLeft = -labelWidth / 2 + 'em';
@@ skipping 19 matching lines @@
     this.seekMark_.classList.remove('inverted');
   } else {
     this.seekMark_.classList.add('inverted');
   }
   this.seekLabel_.textContent = this.valueToString_(ratio);
 
   this.seekMark_.classList.add('visible');
 
   if (this.seekMarkTimer_) {
     clearTimeout(this.seekMarkTimer_);
-    this.seekMarkTimer_ = null;
+    this.seekMarkTimer_ = 0;
   }
   if (timeout != MediaControls.PreciseSlider.NO_AUTO_HIDE) {
     this.seekMarkTimer_ = setTimeout(this.hideSeekMark_.bind(this), timeout);
   }
 };
 
 /**
  * @private
  */
 MediaControls.PreciseSlider.prototype.hideSeekMark_ = function() {
-  this.seekMarkTimer_ = null;
+  this.seekMarkTimer_ = 0;
   this.seekMark_.classList.remove('visible');
 };
 
 /**
  * 'mouseout' event handler.
  * @param {Event} e Event.
  * @private
  */
 MediaControls.PreciseSlider.prototype.onMouseMove_ = function(e) {
   this.latestSeekRatio_ = this.getProportion(e.clientX);
 
-  var self = this;
-  function showMark() {
-    if (!self.isDragging()) {
-      self.showSeekMark_(self.latestSeekRatio_,
+  var showMark = function() {
+    if (!this.isDragging()) {
+      this.showSeekMark_(this.latestSeekRatio_,
           MediaControls.PreciseSlider.HIDE_AFTER_MOVE_DELAY);
     }
-  }
+  }.bind(this);
 
   if (this.seekMark_.classList.contains('visible')) {
     showMark();
   } else if (!this.seekMarkTimer_) {
     this.seekMarkTimer_ =
         setTimeout(showMark, MediaControls.PreciseSlider.SHOW_DELAY);
   }
 };
 
 /**
  * 'mouseout' event handler.
  * @param {Event} e Event.
  * @private
  */
 MediaControls.PreciseSlider.prototype.onMouseOut_ = function(e) {
   for (var element = e.relatedTarget; element; element = element.parentNode) {
     if (element == this.getContainer())
       return;
   }
   if (this.seekMarkTimer_) {
     clearTimeout(this.seekMarkTimer_);
-    this.seekMarkTimer_ = null;
+    this.seekMarkTimer_ = 0;
   }
   this.hideSeekMark_();
 };
 
 /**
  * 'change' event handler.
  * @private
  */
 MediaControls.PreciseSlider.prototype.onInputChange_ = function() {
   MediaControls.Slider.prototype.onInputChange_.apply(this, arguments);
@@ skipping 21 matching lines @@
     this.showSeekMark_(
         this.getValue(), MediaControls.PreciseSlider.HIDE_AFTER_DRAG_DELAY);
     this.latestMouseUpTime_ = Date.now();
   }
 };
 
 /**
  * Create video controls.
  *
  * @param {HTMLElement} containerElement The container for the controls.
- * @param {function} onMediaError Function to display an error message.
+ * @param {function(Event)} onMediaError Function to display an error message.
  * @param {function(string):string} stringFunction Function providing localized
  *     strings.
- * @param {function=} opt_fullScreenToggle Function to toggle fullscreen mode.
+ * @param {function(Event)=} opt_fullScreenToggle Function to toggle fullscreen
+ *     mode.
  * @param {HTMLElement=} opt_stateIconParent The parent for the icon that
  *     gives visual feedback when the playback state changes.
  * @constructor
+ * @struct
+ * @extends {MediaControls}
  */
 function VideoControls(containerElement, onMediaError, stringFunction,
     opt_fullScreenToggle, opt_stateIconParent) {
   MediaControls.call(this, containerElement, onMediaError);
   this.stringFunction_ = stringFunction;
 
   this.container_.classList.add('video-controls');
   this.initPlayButton();
   this.initTimeControls(true /* show seek mark */);
   this.initVolumeControls();
@@ skipping 81 matching lines @@
           'webkitAnimationEnd', onAnimationEnd);
       this.textBanner_.removeAttribute('visible');
     }.bind(this);
     this.textBanner_.addEventListener('webkitAnimationEnd', onAnimationEnd);
 
     this.textBanner_.setAttribute('visible', 'true');
   }.bind(this), 0);
 };
 
 /**
- * Toggle play/pause state on a mouse click on the play/pause button. Can be
- * called externally.
- *
- * @param {Event} event Mouse click event.
+ * @override
  */
 VideoControls.prototype.onPlayButtonClicked = function(event) {
   if (event.ctrlKey) {
     this.toggleLoopedModeWithFeedback(true);
     if (!this.isPlaying())
       this.togglePlayState();
   } else {
     this.togglePlayState();
   }
 };
@@ skipping 120 matching lines @@
   hideBelow('.volume', 275);
   hideBelow('.volume-controls', 210);
   hideBelow('.fullscreen', 150);
 };
 
 /**
  * Creates audio controls.
  *
  * @param {HTMLElement} container Parent container.
  * @param {function(boolean)} advanceTrack Parameter: true=forward.
- * @param {function} onError Error handler.
+ * @param {function(Event)} onError Error handler.
  * @constructor
+ * @struct
+ * @extends {MediaControls}
  */
 function AudioControls(container, advanceTrack, onError) {
   MediaControls.call(this, container, onError);
 
   this.container_.classList.add('audio-controls');
 
   this.advanceTrack_ = advanceTrack;
 
   this.initPlayButton();
   this.initTimeControls(false /* no seek mark */);
@@ skipping 34 matching lines @@
 AudioControls.prototype.onAdvanceClick_ = function(forward) {
   if (!forward &&
       (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) {
     // We are far enough from the beginning of the current track.
     // Restart it instead of than skipping to the previous one.
     this.getMedia().currentTime = 0;
   } else {
     this.advanceTrack_(forward);
   }
 };