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 |