| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 (function() { | 5 (function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 Polymer({ | 8 Polymer({ |
| 9 is: 'control-panel', | 9 is: 'control-panel', |
| 10 | 10 |
| 11 properties: { | 11 properties: { |
| 12 /** | 12 /** |
| 13 * Flag whether the audio is playing or paused. True if playing, or false | 13 * Flag whether the audio is playing or paused. True if playing, or false |
| 14 * paused. | 14 * paused. |
| 15 */ | 15 */ |
| 16 playing: { | 16 playing: { |
| 17 type: Boolean, | 17 type: Boolean, |
| 18 value: false, | 18 value: false, |
| 19 notify: true, | 19 notify: true |
| 20 reflectToAttribute: true, | |
| 21 observer: 'playingChanged_' | |
| 22 }, | 20 }, |
| 23 | 21 |
| 24 /** | 22 /** |
| 25 * Current elapsed time in the current music in millisecond. | 23 * Current elapsed time in the current music in millisecond. |
| 26 */ | 24 */ |
| 27 time: { | 25 time: { |
| 28 type: Number, | 26 type: Number, |
| 29 value: 0, | 27 value: 0, |
| 30 notify: true | 28 notify: true |
| 31 }, | 29 }, |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 83 reflectToAttribute: true | 81 reflectToAttribute: true |
| 84 }, | 82 }, |
| 85 | 83 |
| 86 /** | 84 /** |
| 87 * Whether the knob of time slider is being dragged. | 85 * Whether the knob of time slider is being dragged. |
| 88 */ | 86 */ |
| 89 dragging: { | 87 dragging: { |
| 90 type: Boolean, | 88 type: Boolean, |
| 91 value: false, | 89 value: false, |
| 92 notify: true | 90 notify: true |
| 93 }, | |
| 94 | |
| 95 /** | |
| 96 * Dictionary which contains aria-labels for each controls. | |
| 97 */ | |
| 98 ariaLabels: { | |
| 99 type: Object, | |
| 100 observer: 'ariaLabelsChanged_' | |
| 101 } | 91 } |
| 102 }, | 92 }, |
| 103 | 93 |
| 104 /** | 94 /** |
| 105 * Initializes an element. This method is called automatically when the | 95 * Initializes an element. This method is called automatically when the |
| 106 * element is ready. | 96 * element is ready. |
| 107 */ | 97 */ |
| 108 ready: function() { | 98 ready: function() { |
| 109 this.$.timeSlider.addEventListener('value-change', function() { | 99 this.$.timeSlider.addEventListener('value-change', function() { |
| 110 if (this.dragging) | 100 if (this.dragging) |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 150 * Converts the time and duration into human friendly string. | 140 * Converts the time and duration into human friendly string. |
| 151 * @param {number} time Time to be converted. | 141 * @param {number} time Time to be converted. |
| 152 * @param {number} duration Duration to be converted. | 142 * @param {number} duration Duration to be converted. |
| 153 * @return {string} String representation of the given time | 143 * @return {string} String representation of the given time |
| 154 */ | 144 */ |
| 155 computeTimeString_: function(time, duration) { | 145 computeTimeString_: function(time, duration) { |
| 156 return this.time2string_(time) + ' / ' + this.time2string_(duration); | 146 return this.time2string_(time) + ' / ' + this.time2string_(duration); |
| 157 }, | 147 }, |
| 158 | 148 |
| 159 /** | 149 /** |
| 160 * Invoked when the playing property is changed. | 150 * Computes state for play button based on 'playing' property. |
| 161 * @param {boolean} playing | 151 * @return {string} |
| 162 * @private | |
| 163 */ | 152 */ |
| 164 playingChanged_: function(playing) { | 153 computePlayState_: function(playing) { |
| 165 if (this.ariaLabels) { | 154 return playing ? "playing" : "ended"; |
| 166 this.$.play.setAttribute('aria-label', | |
| 167 playing ? this.ariaLabels.pause : this.ariaLabels.play); | |
| 168 } | |
| 169 }, | 155 }, |
| 170 | 156 |
| 171 /** | 157 /** |
| 172 * Invoked when the ariaLabels property is changed. | 158 * Computes style for '.filled' element of progress bar. |
| 173 * @param {Object} ariaLabels | 159 * @return {string} |
| 174 * @private | |
| 175 */ | 160 */ |
| 176 ariaLabelsChanged_: function(ariaLabels) { | 161 computeProgressBarStyle_: function(time, duration) { |
| 177 assert(ariaLabels); | 162 return 'width: ' + (time / duration * 100) + '%;'; |
| 178 // TODO(fukino): Use data bindings. | |
| 179 this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider); | |
| 180 this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle); | |
| 181 this.$.repeat.setAttribute('aria-label', ariaLabels.repeat); | |
| 182 this.$.previous.setAttribute('aria-label', ariaLabels.previous); | |
| 183 this.$.play.setAttribute('aria-label', | |
| 184 this.playing ? ariaLabels.pause : ariaLabels.play); | |
| 185 this.$.next.setAttribute('aria-label', ariaLabels.next); | |
| 186 this.$.volume.setAttribute('aria-label', ariaLabels.volume); | |
| 187 this.$.playList.setAttribute('aria-label', ariaLabels.playList); | |
| 188 this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider); | |
| 189 } | 163 } |
| 190 }); | 164 }); |
| 191 })(); // Anonymous closure | 165 })(); // Anonymous closure |
| OLD | NEW |