Resource changes to the mediaplayer

BUG=none
TEST=none
Review URL: http://codereview.chromium.org/1627017

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

10 files changed, 132 insertions, 128 deletions

diff --git a/chrome/app/theme/mediaplayer_full_screen.png b/chrome/app/theme/mediaplayer_full_screen.png
index 4776bff..89c55ae 100644
--- a/chrome/app/theme/mediaplayer_full_screen.png
+++ b/chrome/app/theme/mediaplayer_full_screen.png
diff --git a/chrome/app/theme/mediaplayer_menu.png b/chrome/app/theme/mediaplayer_menu.png
index a8e3b90..8c4f113 100644
--- a/chrome/app/theme/mediaplayer_menu.png
+++ b/chrome/app/theme/mediaplayer_menu.png
diff --git a/chrome/app/theme/mediaplayer_next.png b/chrome/app/theme/mediaplayer_next.png
index f8af798..5b1c196 100644
--- a/chrome/app/theme/mediaplayer_next.png
+++ b/chrome/app/theme/mediaplayer_next.png
diff --git a/chrome/app/theme/mediaplayer_pause.png b/chrome/app/theme/mediaplayer_pause.png
index c874205..cfa5a62 100644
--- a/chrome/app/theme/mediaplayer_pause.png
+++ b/chrome/app/theme/mediaplayer_pause.png
diff --git a/chrome/app/theme/mediaplayer_play.png b/chrome/app/theme/mediaplayer_play.png
index a1aaf8e..5f786ed 100644
--- a/chrome/app/theme/mediaplayer_play.png
+++ b/chrome/app/theme/mediaplayer_play.png
diff --git a/chrome/app/theme/mediaplayer_playlist.png b/chrome/app/theme/mediaplayer_playlist.png
new file mode 100755
index 0000000..ec8e1be
--- /dev/null
+++ b/chrome/app/theme/mediaplayer_playlist.png
diff --git a/chrome/app/theme/mediaplayer_prev.png b/chrome/app/theme/mediaplayer_prev.png
index ff38633..77cc900 100644
--- a/chrome/app/theme/mediaplayer_prev.png
+++ b/chrome/app/theme/mediaplayer_prev.png
diff --git a/chrome/app/theme/mediaplayer_vol_high.png b/chrome/app/theme/mediaplayer_vol_high.png
index 067a56c..a35e505 100644
--- a/chrome/app/theme/mediaplayer_vol_high.png
+++ b/chrome/app/theme/mediaplayer_vol_high.png
diff --git a/chrome/app/theme/theme_resources.grd b/chrome/app/theme/theme_resources.grd
index dc922a9..591b904 100644
--- a/chrome/app/theme/theme_resources.grd
+++ b/chrome/app/theme/theme_resources.grd
@@ -491,6 +491,7 @@
         <include name="IDR_MEDIAPLAYER_MENU" file="mediaplayer_menu.png" type="BINDATA" />
         <include name="IDR_MEDIAPLAYER_VOL_HIGH" file="mediaplayer_vol_high.png" type="BINDATA" />
         <include name="IDR_MEDIAPLAYER_FULL_SCREEN" file="mediaplayer_full_screen.png" type="BINDATA" />
+        <include name="IDR_MEDIAPLAYER_PLAYLIST" file="mediaplayer_playlist.png" type="BINDATA" />
         <include name="IDR_LOGIN_DEFAULT_USER" file="login_default.png" type="BINDATA" />
         <include name="IDR_LOGIN_OTHER_USER" file="login_other.png" type="BINDATA" />
         <include name="IDR_APP_LAUNCHER_BUTTON" file="app_launcher_button.png" type="BINDATA" />
diff --git a/chrome/browser/resources/mediaplayer.html b/chrome/browser/resources/mediaplayer.html
index a59394a..ba14bde 100644
--- a/chrome/browser/resources/mediaplayer.html
+++ b/chrome/browser/resources/mediaplayer.html
@@ -4,27 +4,35 @@
 <meta charset="utf-8">
 <title>Media Player</title>
 <style type="text/css">
-.audio.progress {
-  -webkit-appearance: slider-horizontal;
-  position: absolute;
-  left: 93px;
-  right: 120px;
-  bottom: -2px;
-  height: 30px;
-}
 
 body {
   overflow: hidden;
   background: black;
 }
 
-.video.progress {
-  -webkit-appearance: slider-horizontal;
+.glow {
+  left: 0;
+  right: 0;
+  bottom: 30px;
+  height: 8px;
+  opacity: .4;
   position: absolute;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               from(white),
+                               to(transparent));
+}
+.progress {
+  -webkit-appearance: sliderthumb-horizontal;
+  position: absolute;
+  background: transparent;
   left: 93px;
   right: 120px;
   bottom: -2px;
   height: 30px;
+  z-index: 99999;
+  border-left: 1px solid #424242;
 }
 
 .videocontrols {
@@ -32,6 +40,7 @@ body {
   left: 0;
   z-index: 999;
   height: 30px;
+  opacity: .9;
   right: 0;
   position: absolute;
   background: -webkit-gradient(linear,
@@ -41,75 +50,78 @@ body {
                                to(#070707));
 }
 
-.audiocontrols {
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  height: 30px;
-  right: 0;
+.sliderback {
+  bottom: 12px;
+  left: 93px;
+  right: 120px;
+  height: 5px;
   position: absolute;
+  -webkit-border-radius: 3px;
   background: -webkit-gradient(linear,
                                left top,
                                left bottom,
-                               from(#323232),
-                               to(#070707));
+                               from(#ced9fa),
+                               to(#e8ecf9));
+  border: 1px solid #ffffff;
 }
 
-.audio.playbutton {
+.sliderplayed {
+  height: 100%;
+  width:0;
+  left: -1px;
+  top: -1px;
+  -webkit-border-radius: 3px;
+  border: 1px solid #9ca5b7;
   position: absolute;
-  left: 0;
-  bottom: 0;
-  cursor: pointer;
-  z-index: 9999;
-  width: 30px;
-  background: url('../../app/theme/mediaplayer_play.png');
-  background-repeat: no-repeat;
-  background-position: 8px 8px;
-  height: 30px;
+  background: -webkit-gradient(linear,
+                               left top,
+                               left bottom,
+                               from(#4a5d84),
+                               to(#232c3d));
 }
 
-.audio.soundbutton {
+.sliderloaded {
+  height: 100%;
+  width:0;
+  left: -1px;
+  top: -1px;
+  -webkit-border-radius: 3px;
   position: absolute;
-  cursor: pointer;
-  right: 30px;
+  background: #6a799a;
+  border: 1px solid #ffffff;
+}
+
+.audiocontrols {
   bottom: 0;
-  z-index: 9999;
-  width: 30px;
-  background: url('../../app/theme/mediaplayer_vol_high.png');
-  background-repeat: no-repeat;
-  background-position: 8px 8px;
+  left: 0;
+  z-index: 999;
   height: 30px;
+  opacity: .9;
+  right: 0;
+  position: absolute;
+  background: -webkit-gradient(linear,
+                               left top,
+                               left bottom,
+                               from(#323232),
+                               to(#070707));
 }
 
-.video.soundbutton {
+.soundbutton {
   position: absolute;
   right: 30px;
   cursor: pointer;
   bottom: 0;
   z-index: 9999;
-  width: 30px;
+  width: 28px;
   background: url('../../app/theme/mediaplayer_vol_high.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 6px 8px;
   height: 30px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
-.audio.volume {
-  position: absolute;
-  bottom: 30px;
-  height: 80px;
-  width: 30px;
-  right: 30px;
-  z-index: 99999;
-  background: black;
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(#323232),
-                               to(#070707));
-}
-
-.video.volume {
+.volume {
   position: absolute;
   bottom: 30px;
   height: 80px;
@@ -124,30 +136,19 @@ body {
                                to(#070707));
 }
 
-.audio.fullscreen {
-  position: absolute;
-  right: 60px;
-  cursor: pointer;
-  bottom: 0;
-  z-index: 9999;
-  width: 30px;
-  background: url('../../app/theme/mediaplayer_full_screen.png');
-  background-repeat: no-repeat;
-  background-position: 4px 4px;
-  height: 30px;
-}
-
-.video.fullscreen {
+.fullscreen {
   position: absolute;
   right: 60px;
   cursor: pointer;
   bottom: 0;
   z-index: 9999;
-  width: 30px;
+  width: 28px;
   background: url('../../app/theme/mediaplayer_full_screen.png');
   background-repeat: no-repeat;
-  background-position: 4px 4px;
+  background-position: 8px 8px;
   height: 30px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
 .volumeslider {
@@ -159,55 +160,47 @@ body {
   top: 0;
 }
 
-.video.playbutton {
+.playbutton {
   position: absolute;
-  left: 0;
+  left: 30px;
   bottom: 0;
   cursor: pointer;
   z-index: 9999;
-  width: 30px;
+  width: 28px;
   background: url('../../app/theme/mediaplayer_play.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 9px 8px;
   height: 30px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
-.audio.pausebutton {
+.pausebutton {
   position: absolute;
-  left: 0;
+  left: 30px;
   bottom: 0;
   cursor: pointer;
   z-index: 9999;
-  width: 30px;
+  width: 28px;
   height: 30px;
   background: url('../../app/theme/mediaplayer_pause.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 11px 8px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
-.video.pausebutton {
+.prevbutton {
   position: absolute;
   left: 0;
-  bottom: 0;
-  cursor: pointer;
-  z-index: 9999;
-  width: 30px;
-  height: 30px;
-  background: url('../../app/theme/mediaplayer_pause.png');
-  background-repeat: no-repeat;
-  background-position: 8px 8px;
-}
-
-.video.prevbutton {
-  position: absolute;
-  left: 30px;
   cursor: pointer;
   bottom: 0;
-  width: 30px;
+  width: 29px;
   height: 30px;
   background: url('../../app/theme/mediaplayer_prev.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 6px 8px;
+  border-right: 1px solid black;
 }
 
 .playbackvideoelement {
@@ -219,11 +212,12 @@ body {
 }
 
 .duration {
-  right: 88px;
+  right: 90px;
   color: white;
   position: absolute;
-  top: 7px;
+  top: 8.5px;
   font-size: .6em;
+  height: 30px;
 }
 
 .playbackaudioelement {
@@ -234,29 +228,19 @@ body {
   top: 0;
 }
 
-.audio.prevbutton {
-  position: absolute;
-  left: 30px;
-  cursor: pointer;
-  bottom: 0;
-  width: 30px;
-  height: 30px;
-  background: url('../../app/theme/mediaplayer_prev.png');
-  background-repeat: no-repeat;
-  background-position: 8px 8px;
-}
-
-.video.nextbutton {
+.nextbutton {
   position: absolute;
   left: 60px;
   cursor: pointer;
   bottom: 0;
   z-index: 9999;
-  width: 30px;
+  width: 28px;
   height: 30px;
   background: url('../../app/theme/mediaplayer_next.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 6px 8px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
 .playlistbutton {
@@ -265,24 +249,13 @@ body {
   cursor: pointer;
   z-index: 9999;
   bottom: 0;
-  width: 30px;
-  height: 30px;
-  background: url('../../app/theme/mediaplayer_menu.png');
-  background-repeat: no-repeat;
-  background-position: 8px 8px;
-}
-
-.audio.nextbutton {
-  position: absolute;
-  left: 60px;
-  cursor: pointer;
-  bottom: 0;
-  z-index: 9999;
-  width: 30px;
+  width: 28px;
   height: 30px;
-  background: url('../../app/theme/mediaplayer_next.png');
+  background: url('../../app/theme/mediaplayer_playlist.png');
   background-repeat: no-repeat;
-  background-position: 8px 8px;
+  background-position: 6px 8px;
+  border-left: 1px solid #424242;
+  border-right: 1px solid black;
 }
 
 </style>
@@ -321,11 +294,24 @@ function onMediaProgress() {
   var duration = element.duration;
   var progress = $('progress');
   progress.value = (current*100)/duration;
+  var played = $('sliderplayed');
+  played.style.width = '' + progress.value + '%';
   if (progress.value == 100) {
     onMediaComplete();
   }
 };
 
+function onLoadedProgress(e) {
+  var element = $('sliderloaded');
+  if (e.lengthComputable) {
+    element.style.display = 'block';
+    var percent = (e.loaded * 100) / e.total;
+    element.style.width = '' + percent + '%';
+  } else {
+    element.style.display = 'none';
+  }
+};
+
 function onMediaError(e) {
   chrome.send('playbackError', ['Error playing back']);
   onMediaComplete();
@@ -333,6 +319,7 @@ function onMediaError(e) {
 
 function onMediaComplete() {
   var mediaElement = getMediaElement();
+  mediaElement.removeEventListener("progress", onLoadedProgress, true);
   mediaElement.removeEventListener("timeupdate", onMediaProgress, true);
   mediaElement.removeEventListener("durationchange", onMetadataAvail, true);
   // MediaElement.removeEventListener("ended", onMediaComplete, true);
@@ -363,6 +350,7 @@ function onMediaPause() {
 };
 
 function setupMediaEvents(element) {
+  element.addEventListener("progress", onLoadedProgress, true);
   element.addEventListener("timeupdate", onMediaProgress, true);
   element.addEventListener("durationchange", onMetadataAvail, true);
   // element.addEventListener("ended", onMediaComplete, true);
@@ -489,6 +477,20 @@ function setupPlaybackControls() {
   slider.onchange = userChangedProgress;
   element.appendChild(slider);
 
+  var sliderback = document.createElement('div');
+  sliderback.className = 'sliderback';
+  element.appendChild(sliderback);
+  
+  var loaded = document.createElement('div');
+  loaded.id = 'sliderloaded';
+  loaded.className = 'sliderloaded';
+  sliderback.appendChild(loaded);
+
+  var played = document.createElement('div');
+  played.id = 'sliderplayed';
+  played.className = 'sliderplayed';
+  sliderback.appendChild(played);
+
   var soundbutton = document.createElement('div');
   soundbutton.id = 'soundbutton';
   soundbutton.className = controlsclass + ' soundbutton';
@@ -646,6 +648,7 @@ function playMediaFile(url) {
 
 </script>
 <body onload='load();' onselectstart='return false'>
+<div id='glow' class='glow'></div>
 <div id='playercontrols' class='playercontrols'>
 </div>
 </body>