Audio Player: Improve how to skip playing position on arrow keys on time slider.

When time slider is focused, playing position should be skipped on arrow keys as follows:
<Right> or <Up>: skip forward 5 seconds or 10% of duration, whichever is smaller.
<Left> or <Down>: skip forward 5 seconds or 10% of duration, whichever is smaller.

BUG=492980
TEST=manually

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

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

1 files changed, 28 insertions, 0 deletions

diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index 0267152..790c41a 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -139,6 +139,10 @@
         if (!this.dragging)
           this.dragging = true;
       }.bind(this));
+      timeSlider.addEventListener('keydown',
+          this.onProgressKeyDownOrKeyPress_.bind(this));
+      timeSlider.addEventListener('keypress',
+          this.onProgressKeyDownOrKeyPress_.bind(this));
 
       // Update volume on user inputs for volume slider.
       // During a drag operation, the volume should be updated immediately.
@@ -269,6 +273,30 @@
       this.$.volumeButton.setAttribute('aria-label',
           this.volume !== 0 ? ariaLabels.mute : ariaLabels.unmute);
       this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
+    },
+
+    /**
+     * Handles arrow keys on time slider to skip forward/backword.
+     * @param {!Event} event
+     * @private
+     */
+    onProgressKeyDownOrKeyPress_: function(event) {
+      if (event.code !== 'ArrowRight' && event.code !== 'ArrowLeft' &&
+          event.code !== 'ArrowUp' && event.code !== 'ArrowDown') {
+        return;
+      }
+
+      event.preventDefault();
+
+      if (this.duration > 0) {
+        // Skip 5 seconds or 10% of duration, whichever is smaller.
+        var millisecondsToSkip = Math.min(5000, this.duration / 10);
+        if (event.code === 'ArrowRight' || event.code === 'ArrowUp') {
+          this.time = Math.min(this.time + millisecondsToSkip, this.duration);
+        } else {
+          this.time = Math.max(this.time - millisecondsToSkip, 0);
+        }
+      }
     }
   });
 })();  // Anonymous closure