VideoPlayer: Create subtitles button.

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.
  */
 
 /**
@@ skipping 39 matching lines @@
    */
   this.textBanner_ = null;
 
   /**
    * @type {HTMLElement}
    * @private
    */
   this.soundButton_ = null;
 
   /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.subtitlesButton_ = null;
+
+  /**
+   * @private {TextTrack}
+   */
+  this.subtitlesTrack_ = null;
+
+  /**
    * @type {boolean}
    * @private
    */
   this.resumeAfterDrag_ = false;
 
   /**
    * @type {HTMLElement}
    * @private
    */
   this.currentTime_ = null;
@@ skipping 441 matching lines @@
 
 /**
  * @private
  */
 MediaControls.prototype.onVolumeDrag_ = function() {
   if (this.media_.volume !== 0) {
     this.savedVolume_ = this.media_.volume;
   }
 };
 
+/**
+ * Initializes subtitles button.
+ */
+MediaControls.prototype.initSubtitlesButton = function() {
+  this.subtitlesTrack_ = null;
+  this.subtitlesButton_ =
+      this.createButton('subtitles', this.onSubtitlesButtonClicked_.bind(this));
+  this.subtitlesButton_.setAttribute('aria-label',
+      str('VIDEO_PLAYER_SUBTITLES_BUTTON_LABEL'));
+};
+
+/**
+ * @param {Event} event Mouse click event.
+ * @private
+ */
+MediaControls.prototype.onSubtitlesButtonClicked_ = function(event) {
+  if (!this.subtitlesTrack_) {
+    return;
+  }
+  this.toggleSubtitlesMode_(this.subtitlesTrack_.mode === 'hidden');
+};
+
+/**
+ * @param {boolean} on Whether enabled or not.
+ * @private
+ */
+MediaControls.prototype.toggleSubtitlesMode_ = function(on) {
+  if (!this.subtitlesTrack_) {
+    return;
+  }
+  if (on) {
+    this.subtitlesTrack_.mode = 'showing';
+    this.subtitlesButton_.setAttribute('showing', '');
+  } else {
+    this.subtitlesTrack_.mode = 'hidden';
+    this.subtitlesButton_.removeAttribute('showing');
+  }
+};
+
+/**
+ * @param {TextTrack} track Subtitles track
+ * @private
+ */
+MediaControls.prototype.attachTextTrack_ = function(track) {
+  this.subtitlesTrack_ = track;
+  if (this.subtitlesTrack_) {
+    this.toggleSubtitlesMode_(true);
+    this.subtitlesButton_.removeAttribute('unavailable');
+  } else {
+    this.subtitlesButton_.setAttribute('unavailable', '');
+  }
+};
+
+/**
+ * @private
+ */
+MediaControls.prototype.detachTextTrack_ = function() {
+  this.subtitlesTrack_ = null;
+};
+
 /*
  * Media event handlers.
  */
 
 /**
  * Attach a media element.
  *
  * @param {!HTMLMediaElement} mediaElement The media element to control.
  */
 MediaControls.prototype.attachMedia = function(mediaElement) {
@@ skipping 10 matching lines @@
   this.textBanner_.removeAttribute('visible');
 
   // Reflect the media state in the UI.
   this.onMediaDuration_();
   this.onMediaPlay_(this.isPlaying());
   this.onMediaProgress_();
   if (this.volume_) {
     /* Copy the user selected volume to the new media element. */
     this.savedVolume_ = this.media_.volume = this.volume_.ratio;
   }
+  if (this.media_.textTracks.length > 0) {
+    this.attachTextTrack_(this.media_.textTracks[0]);
+  }else{

[yoshiki, 2016/03/25 13:18:41]

nit: spaces before and after "else".

[ryoh, 2016/03/28 00:27:14]

Done.

+    this.attachTextTrack_(null);
+  }
 };
 
 /**
  * Detach media event handlers.
  */
 MediaControls.prototype.detachMedia = function() {
   if (!this.media_)
     return;
 
   this.media_.removeEventListener('play', this.onMediaPlayBound_);
   this.media_.removeEventListener('pause', this.onMediaPauseBound_);
   this.media_.removeEventListener('durationchange', this.onMediaDurationBound_);
   this.media_.removeEventListener('timeupdate', this.onMediaProgressBound_);
   this.media_.removeEventListener('error', this.onMediaError_);
 
   this.media_ = null;
+  this.detachTextTrack_();
 };
 
 /**
  * Force-empty the media pipeline. This is a workaround for crbug.com/149957.
  * The document is not going to be GC-ed until the last Files app window closes,
  * but we want the media pipeline to deinitialize ASAP to minimize leakage.
  */
 MediaControls.prototype.cleanup = function() {
   if (!this.media_)
     return;
@@ skipping 159 matching lines @@
  * @extends {MediaControls}
  */
 function VideoControls(
     containerElement, onMediaError, opt_fullScreenToggle, opt_stateIconParent) {
   MediaControls.call(this, containerElement, onMediaError);
 
   this.container_.classList.add('video-controls');
   this.initPlayButton();
   this.initTimeControls();
   this.initVolumeControls();
+  this.initSubtitlesButton();
 
   // Create the cast button.
   // We need to use <button> since cr.ui.MenuButton.decorate modifies prototype
   // chain, by which <files-icon-button> will not work correctly.
   // TODO(fukino): Find a way to use files-icon-button consistently.
   this.castButton_ = this.createControl(
       'cast media-button', undefined, 'button');
   this.castButton_.setAttribute('menu', '#cast-menu');
   this.castButton_.setAttribute('aria-label', str('VIDEO_PLAYER_PLAY_ON'));
   this.castButton_.setAttribute('state', MediaControls.ButtonStateType.DEFAULT);
@@ skipping 207 matching lines @@
   } else {
     this.container_.removeAttribute('fullscreen');
   }
 
   if (this.fullscreenButton_) {
     this.fullscreenButton_.setAttribute('aria-label',
         fullscreen ? str('VIDEO_PLAYER_EXIT_FULL_SCREEN_BUTTON_LABEL')
                    : str('VIDEO_PLAYER_FULL_SCREEN_BUTTON_LABEL'));;
   }
 };