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   /**
  29    * Converts the time into human friendly string.
  30    * @param {number} time Time to be converted.
  31    * @return {string} String representation of the given time
  32    */
  33   function time2string(time) {
  34     return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2);
  35   }
  36
  37   Polymer('control-panel', {
  38     /**
  39      * Initializes an element. This method is called automatically when the
  40      * element is ready.
  41      */
  42     ready: function() {
  43       var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this);
  44       this.$.volumeSlider.addEventListener('focusout', onFocusoutBound);
  45       this.$.volumeButton.addEventListener('focusout', onFocusoutBound);
  46     },
  47
  48     /**
  49      * Model object of the Audio Player.
  50      * @type {AudioPlayerModel}
  51      */
  52     model: null,
  53
  54     /**
  55      * Invoked when the model changed.
  56      * @param {AudioPlayerModel} oldValue Old Value.
  57      * @param {AudioPlayerModel} newValue New Value.
  58      */
  59     modelChanged: function(oldValue, newValue) {
  60       this.$.volumeSlider.model = newValue;
  61     },
  62
  63     /**
  64      * Current elapsed time in the current music in millisecond.
  65      * @type {number}
  66      */
  67     time: 0,
  68
  69     /**
  70      * String representation of 'time'.
  71      * @type {number}
  72      * @private
  73      */
  74     get timeString_() {
  75       return time2string(this.time);
  76     },
  77
  78     /**
  79      * Total length of the current music in millisecond.
  80      * @type {number}
  81      */
  82     duration: 0,
  83
  84     /**
  85      * String representation of 'duration'.
  86      * @type {string}
  87      * @private
  88      */
  89     get durationString_() {
  90       return time2string(this.duration);
  91     },
  92
  93     /**
  94      * Flag whether the volume slider is expanded or not.
  95      * @type {boolean}
  96      */
  97     volumeSliderShown: false,
  98
  99     /**
 100      * Flag whether the audio is playing or paused. True if playing, or false
 101      * paused.
 102      * @type {boolean}
 103      */
 104     playing: false,
 105
 106     /**
 107      * Invoked when the 'duration' property is changed.
 108      * @param {number} oldValue old value.
 109      * @param {number} newValue new value.
 110      */
 111     durationChanged: function(oldValue, newValue) {
 112       // Reset the current playback position.
 113       this.time = 0;
 114     },
 115
 116     /**
 117      * Invoked when the next button is clicked.
 118      */
 119     nextClick: function() {
 120       this.fire('next-clicked');
 121     },
 122
 123     /**
 124      * Invoked when the play button is clicked.
 125      */
 126     playClick: function() {
 127       this.playing = !this.playing;
 128     },
 129
 130     /**
 131      * Invoked when the previous button is clicked.
 132      */
 133     previousClick: function() {
 134       this.fire('previous-clicked');
 135     },
 136
 137     /**
 138      * Invoked the volume button is clicked.
 139      * @type {Event} event The event.
 140      */
 141     volumeButtonClick: function(event) {
 142       this.showVolumeController_(this.volumeSliderShown);
 143       event.stopPropagation();
 144     },
 145
 146     /**
 147      * Invoked when the focus goes out of the volume elements.
 148      * @param {FocusEvent} event The focusout event.
 149      * @private
 150      */
 151     onVolumeControllerFocusout_: function(event) {
 152       if (this.volumeSliderShown) {
 153         // If the focus goes out of the volume, hide the volume control.
 154         if (!event.relatedTarget ||
 155             (event.relatedTarget !== this.$.volumeButton &&
 156              event.relatedTarget !== this.$.volumeSlider)) {
 157           this.showVolumeController_(false);
 158           this.volumeSliderShown = false;
 159         }
 160       }
 161     },
 162
 163     /**
 164      * Shows/hides the volume controller.
 165      * @param {boolean} show True to show the controller, false to hide.
 166      * @private
 167      */
 168     showVolumeController_: function(show) {
 169       if (show) {
 170         matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
 171         this.$.volumeContainer.style.visibility = 'visible';
 172       } else {
 173         this.$.volumeContainer.style.visibility = 'hidden';
 174       }
 175     },
 176   });
 177 })();  // Anonymous closure