AudioPlayer: Update control panel with playback progress bar.

ui/file_manager/audio_player/elements/audio_player.js

 // Copyright 2014 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.
 
 Polymer({
   is: 'audio-player',
 
   properties: {
     /**
      * Flag whether the audio is playing or paused. True if playing, or false
@@ skipping 76 matching lines @@
      * The number of played tracks. (exposed publicly for tests)
      */
     playcount: {
       type: Number,
       value: 0,
       reflectToAttribute: true
     }
   },
 
   /**
+   * The last playing state when user starts dragging the seek bar.
+   * @private {boolean}
+   */
+  wasPlayingOnDragStart_: false,
+
+  /**
    * Handles change event for shuffle mode.
    * @param {boolean} shuffle
    */
   shuffleChanged: function(shuffle) {
     if (this.model)
       this.model.shuffle = shuffle;
   },
 
   /**
    * Handles change event for repeat mode.
@@ skipping 21 matching lines @@
       this.model.expanded = expanded;
   },
 
   /**
    * Initializes an element. This method is called automatically when the
    * element is ready.
    */
   ready: function() {
     this.addEventListener('keydown', this.onKeyDown_.bind(this));
 
+    this.$.audioController.addEventListener('dragging-changed',
+        this.onDraggingChanged_.bind(this));
+
     this.$.audio.volume = 0;  // Temporary initial volume.
     this.$.audio.addEventListener('ended', this.onAudioEnded.bind(this));
     this.$.audio.addEventListener('error', this.onAudioError.bind(this));
 
     var onAudioStatusUpdatedBound = this.onAudioStatusUpdate_.bind(this);
     this.$.audio.addEventListener('timeupdate', onAudioStatusUpdatedBound);
     this.$.audio.addEventListener('ended', onAudioStatusUpdatedBound);
     this.$.audio.addEventListener('play', onAudioStatusUpdatedBound);
     this.$.audio.addEventListener('pause', onAudioStatusUpdatedBound);
     this.$.audio.addEventListener('suspend', onAudioStatusUpdatedBound);
@@ skipping 241 matching lines @@
   },
 
   /**
    * Invoked when the audio player is being unloaded.
    */
   onPageUnload: function() {
     this.$.audio.src = '';  // Hack to prevent crashing.
   },
 
   /**
+   * Invoked when dragging state of seek bar on control panel is changed.
+   * During the user is dragging it, audio playback is paused temporalily.
+   */
+  onDraggingChanged_: function() {
+    if (this.$.audioController.dragging) {
+      if (this.playing) {
+        this.wasPlayingOnDragStart_ = true;
+        this.$.audio.pause();
+      }
+    } else {
+      if (this.wasPlayingOnDragStart_) {
+        this.$.audio.play();
+        this.wasPlayingOnDragStart_ = false;
+      }
+    }
+  },
+
+  /**
    * Invoked when the 'keydown' event is fired.
    * @param {Event} event The event object.
    */
   onKeyDown_: function(event) {
     switch (event.keyIdentifier) {
       case 'Up':
         if (this.$.audioController.volumeSliderShown && this.model.volume < 100)
           this.model.volume += 1;
         break;
       case 'Down':
@@ skipping 25 matching lines @@
 
   /**
    * Computes volume value for audio element. (should be in [0.0, 1.0])
    * @param {number} volume Volume which is set in the UI. ([0, 100])
    * @return {number}
    */
   computeAudioVolume_: function(volume) {
     return volume / 100;
   }
 });