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