Chrome OS Media Player: Better handling of video playback errors and slow loading.

Currently if the video takes long to start we do not show the spinner and if the video error happens on the start we show a (slightly) wrong message. 

BUG=
TEST=


Review URL: http://codereview.chromium.org/9808053

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@128777 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 34 insertions, 13 deletions

diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery.js b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
index 1ef9da5..cc241e7 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
@@ -210,6 +210,7 @@ Gallery.prototype.initDom_ = function() {
 
   this.errorWrapper_ = this.document_.createElement('div');
   this.errorWrapper_.className = 'prompt-wrapper';
+  this.errorWrapper_.setAttribute('pos', 'center');
   this.container_.appendChild(this.errorWrapper_);
 
   this.errorBanner_ = this.document_.createElement('div');
@@ -547,7 +548,7 @@ Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
 
     self.showSpinner_(false);
     if (loadType == ImageView.LOAD_TYPE_ERROR) {
-      self.showErrorBanner_('IMAGE_ERROR');
+      self.showErrorBanner_(video? 'VIDEO_ERROR' : 'IMAGE_ERROR');
     }
 
     if (video) {
diff --git a/chrome/browser/resources/file_manager/js/image_editor/image_view.js b/chrome/browser/resources/file_manager/js/image_editor/image_view.js
index a2e6d4f..c36fd9d 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/image_view.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/image_view.js
@@ -186,11 +186,20 @@ ImageView.prototype.load = function(
     var video = this.document_.createElement('video');
     if (metadata.thumbnailURL) {
       video.setAttribute('poster', metadata.thumbnailURL);
+      this.replace(video, slide); // Show the poster immediately.
     }
+    video.addEventListener('loadedmetadata', onVideoLoad);
+    video.addEventListener('error', onVideoLoad);
+
     video.src = metadata.contentURL || source;
     video.load();
-    displayMainImage(ImageView.LOAD_TYPE_VIDEO_FILE, slide,
-        false /* no preview */, video);
+
+    function onVideoLoad() {
+      video.removeEventListener('loadedmetadata', onVideoLoad);
+      video.removeEventListener('error', onVideoLoad);
+      displayMainImage(ImageView.LOAD_TYPE_VIDEO_FILE, slide,
+          !!metadata.thumbnailURL /* preview shown */, video);
+    }
     return;
   }
   var readyContent = this.getReadyContent(id, source);
@@ -279,12 +288,19 @@ ImageView.prototype.load = function(
   }
 
   function displayMainImage(loadType, slide, previewShown, content) {
-    if (!loadingVideo && content.width == 0) {
+    if ((!loadingVideo && !content.width) ||
+        (loadingVideo && !content.duration)) {
       loadType = ImageView.LOAD_TYPE_ERROR;
     }
 
-    // If there is no main image we keep the preview displayed.
-    if (loadType != ImageView.LOAD_TYPE_ERROR || !previewShown) {
+    // If we already displayed the preview we should not replace the content if:
+    //   1. The full content failed to load.
+    //     or
+    //   2. We are loading a video (because the full video is displayed in the
+    //      same HTML element as the preview).
+    if (!(previewShown &&
+        (loadType == ImageView.LOAD_TYPE_ERROR ||
+         loadType == ImageView.LOAD_TYPE_VIDEO_FILE))) {
       self.replace(content, slide);
     }
 
diff --git a/chrome/browser/resources/file_manager/js/media/media_controls.js b/chrome/browser/resources/file_manager/js/media/media_controls.js
index 0d2e03a..5d38d9c 100644
--- a/chrome/browser/resources/file_manager/js/media/media_controls.js
+++ b/chrome/browser/resources/file_manager/js/media/media_controls.js
@@ -255,10 +255,10 @@ MediaControls.prototype.attachMedia = function(mediaElement) {
   this.media_.addEventListener('timeupdate', this.onMediaProgressBound_);
   this.media_.addEventListener('error', this.onMediaError_);
 
-  // Reset the UI.
-  this.enableControls_('.media-control', false);
-  this.playButton_.setAttribute('state', 0);
-  this.displayProgress_(0, 1);
+  // 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.media_.volume = this.volume_.getValue();
@@ -289,8 +289,10 @@ MediaControls.prototype.onMediaPlay_ = function(playing) {
 };
 
 MediaControls.prototype.onMediaDuration_ = function() {
-  if (!this.media_.duration)
+  if (!this.media_.duration) {
+    this.enableControls_('.media-control', false);
     return;
+  }
 
   this.enableControls_('.media-control', true);
 
@@ -310,9 +312,11 @@ MediaControls.prototype.onMediaDuration_ = function() {
     this.progressSlider_.setValueToStringFunction(valueToString);
 };
 
-MediaControls.prototype.onMediaProgress_ = function(e) {
-  if (!this.media_.duration)
+MediaControls.prototype.onMediaProgress_ = function() {
+  if (!this.media_.duration) {
+    this.displayProgress_(0, 1);
     return;
+  }
 
   var current = this.media_.currentTime;
   var duration = this.media_.duration;