ui/file_manager/audio_player/elements/control_panel.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 (function() {
   6   'use strict';
   7
   8   /**
   9    * Moves |target| element above |anchor| element, in order to match the
  10    * bottom lines.
  11    * @param {HTMLElement} target Target element.
  12    * @param {HTMLElement} anchor Anchor element.
  13    */
  14   function matchBottomLine(target, anchor) {
  15     var targetRect = target.getBoundingClientRect();
  16     var anchorRect = anchor.getBoundingClientRect();
  17
  18     var pos = {
  19       left: anchorRect.left + anchorRect.width / 2 - targetRect.width / 2,
  20       bottom: window.innerHeight - anchorRect.bottom,
  21     };
  22
  23     target.style.position = 'fixed';
  24     target.style.left = pos.left + 'px';
  25     target.style.bottom = pos.bottom + 'px';
  26   }
  27
  28   Polymer({
  29     is: 'control-panel',
  30
  31     properties: {
  32       /**
  33        * Flag whether the audio is playing or paused. True if playing, or false
  34        * paused.
  35        */
  36       playing: {
  37         type: Boolean,
  38         value: false,
  39         notify: true
  40       },
  41
  42       /**
  43        * Current elapsed time in the current music in millisecond.
  44        */
  45       time: {
  46         type: Number,
  47         value: 0,
  48         notify: true
  49       },
  50
  51       /**
  52        * Total length of the current music in millisecond.
  53        */
  54       duration: {
  55         type: Number,
  56         value: 0
  57       },
  58
  59       /**
  60        * Whether the shuffle button is ON.
  61        */
  62       shuffle: {
  63         type: Boolean,
  64         value: false,
  65         notify: true
  66       },
  67
  68       /**
  69        * Whether the repeat button is ON.
  70        */
  71       repeat: {
  72         type: Boolean,
  73         value: false,
  74         notify: true
  75       },
  76
  77       /**
  78        * The audio volume. 0 is silent, and 100 is maximum loud.
  79        */
  80       volume: {
  81         type: Number,
  82         notify: true
  83       },
  84
  85       /**
  86        * Whether the expanded button is ON.
  87        */
  88       expanded: {
  89         type: Boolean,
  90         value: false,
  91         notify: true
  92       },
  93
  94       /**
  95        * Whether the volume slider is expanded or not.
  96        */
  97       volumeSliderShown: {
  98         type: Boolean,
  99         value: false,
 100         observer: 'volumeSliderShownChanged',
 101         notify: true
 102       }
 103     },
 104
 105     /**
 106      * Initializes an element. This method is called automatically when the
 107      * element is ready.
 108      */
 109     ready: function() {
 110       var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this);
 111
 112       this.$.volumeSlider.addEventListener('focusout', onFocusoutBound);
 113       this.$.volumeButton.addEventListener('focusout', onFocusoutBound);
 114
 115       // Prevent the time slider from being moved by arrow keys.
 116       this.$.timeInput.addEventListener('keydown', function(event) {
 117         switch (event.keyCode) {
 118           case 37:  // Left arrow
 119           case 38:  // Up arrow
 120           case 39:  // Right arrow
 121           case 40:  // Down arrow
 122             event.preventDefault();
 123             break;
 124         };
 125       });
 126     },
 127
 128     /**
 129      * Invoked when the next button is clicked.
 130      */
 131     nextClick: function() {
 132       this.fire('next-clicked');
 133     },
 134
 135     /**
 136      * Invoked when the play button is clicked.
 137      */
 138     playClick: function() {
 139       this.playing = !this.playing;
 140     },
 141
 142     /**
 143      * Invoked when the previous button is clicked.
 144      */
 145     previousClick: function() {
 146       this.fire('previous-clicked');
 147     },
 148
 149     /**
 150      * Invoked when the property 'volumeSliderShown' changes.
 151      * @param {boolean} shown
 152      */
 153     volumeSliderShownChanged: function(shown) {
 154       this.showVolumeController_(shown);
 155     },
 156
 157     /**
 158      * Invoked when the focus goes out of the volume elements.
 159      * @param {!UIEvent} event The focusout event.
 160      * @private
 161      */
 162     onVolumeControllerFocusout_: function(event) {
 163       if (this.volumeSliderShown) {
 164         // If the focus goes out of the volume, hide the volume control.
 165         if (!event.relatedTarget ||
 166             (event.relatedTarget !== this.$.volumeButton &&
 167              event.relatedTarget !== this.$.volumeSlider)) {
 168           this.volumeSliderShown = false;
 169         }
 170       }
 171     },
 172
 173     /**
 174      * Shows/hides the volume controller.
 175      * @param {boolean} show True to show the controller, false to hide.
 176      * @private
 177      */
 178     showVolumeController_: function(show) {
 179       if (show) {
 180         matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
 181         this.$.volumeContainer.style.visibility = 'visible';
 182       } else {
 183         this.$.volumeContainer.style.visibility = 'hidden';
 184       }
 185     },
 186
 187     /**
 188      * Converts the time into human friendly string.
 189      * @param {number} time Time to be converted.
 190      * @return {string} String representation of the given time
 191      */
 192     time2string_: function(time) {
 193       return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2);
 194     },
 195
 196     /**
 197      * Computes state for play button based on 'playing' property.
 198      * @return {string}
 199      */
 200     computePlayState_: function(playing) {
 201       return playing ? "playing" : "ended";
 202     },
 203
 204     /**
 205      * Computes style for '.filled' element of progress bar.
 206      * @return {string}
 207      */
 208     computeProgressBarStyle_: function(time, duration) {
 209       return 'width: ' + (time / duration * 100) + '%;';
 210     }
 211   });
 212 })();  // Anonymous closure