Add subtitles track if there is a subtitles file with the same name.

BUG=585723
TEST=manually

Review URL: https://codereview.chromium.org/1782363003

Cr-Commit-Position: refs/heads/master@{#381395}

2 files changed, 43 insertions, 6 deletions

diff --git a/ui/file_manager/video_player/js/test_util.js b/ui/file_manager/video_player/js/test_util.js
index 2415cd6..9e5d019 100644
--- a/ui/file_manager/video_player/js/test_util.js
+++ b/ui/file_manager/video_player/js/test_util.js
@@ -14,7 +14,7 @@ function testElement(filename, testFunction) {
     var contentWindow = window.background.appWindows[appId].contentWindow;
     if (contentWindow &&
         contentWindow.document.title === filename) {
-      var element = contentWindow.document.querySelector('video[src]');
+      var element = contentWindow.document.querySelector('video');
       if (element && testFunction(element))
         return true;
     }
diff --git a/ui/file_manager/video_player/js/video_player.js b/ui/file_manager/video_player/js/video_player.js
index bed41ba..469e09e 100644
--- a/ui/file_manager/video_player/js/video_player.js
+++ b/ui/file_manager/video_player/js/video_player.js
@@ -376,8 +376,11 @@ VideoPlayer.prototype.loadVideo_ = function(video, opt_callback) {
       this.videoElement_ = document.createElement('video');
       getRequiredElement('video-container').appendChild(this.videoElement_);
 
+      var videoUrl = video.toURL();
       this.controls.attachMedia(this.videoElement_);
-      this.videoElement_.src = video.toURL();
+      var source = document.createElement('source');
+      source.src = videoUrl;
+      this.videoElement_.appendChild(source);
 
       media.isAvailableForCast().then(function(result) {
         if (result)
@@ -388,9 +391,17 @@ VideoPlayer.prototype.loadVideo_ = function(video, opt_callback) {
         videoPlayerElement.setAttribute('castable', true);
       });
 
-      videoElementInitializePromise = Promise.resolve();
+      videoElementInitializePromise = this.searchSubtitle_(videoUrl)
+          .then(function(subltitleUrl) {
+            if (subltitleUrl) {
+              var track = document.createElement('track');
+              track.src = subltitleUrl;
+              track.kind = 'subtitles';
+              track.default = true;
+              this.videoElement_.appendChild(track);
+            }
+          }.bind(this));
     }
-
     videoElementInitializePromise
         .then(function() {
           var handler = function(currentPos) {
@@ -413,8 +424,16 @@ VideoPlayer.prototype.loadVideo_ = function(video, opt_callback) {
             chrome.power.releaseKeepAwake();
             this.updateInactivityWatcherState_();
           }.wrap(this));
-
-          this.videoElement_.load();
+          // TODO(ryoh):
+          // If you modify the video element that is already inserted,
+          // you have to call load() method.
+          // https://dev.w3.org/html5/spec-author-view/video.html
+          // But we always create new video element (see above),
+          // we don't have to call load().
+          // If you call load() method here,
+          // you can't see subtitles.
+          // (It might be a bug: https://crbug.com/594537)
+          //this.videoElement_.load();
           callback();
         }.bind(this))
         // In case of error.
@@ -433,6 +452,24 @@ VideoPlayer.prototype.loadVideo_ = function(video, opt_callback) {
 };
 
 /**
+ * Search subtile file corresponding to a video.
+ * @param {string} url a url of a video.
+ * @return {string} a url of subtitle file, or an empty string.
+ */
+VideoPlayer.prototype.searchSubtitle_ = function(url) {
+  var baseUrl = util.splitExtension(url)[0];
+  var resolveLocalFileSystemWithExtension = function(extension) {
+    return new Promise(
+        window.webkitResolveLocalFileSystemURL.bind(null, baseUrl + extension));
+  };
+  return resolveLocalFileSystemWithExtension('.vtt').then(function(subtitle) {
+    return subtitle.toURL();
+  }).catch(function() {
+    return '';
+  });
+};
+
+/**
  * Plays the first video.
  */
 VideoPlayer.prototype.playFirstVideo = function() {