Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(66)

Side by Side Diff: ui/file_manager/audio_player/js/audio_player.js

Issue 1432393003: Revert of AudioPlayer: Update volume controls. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 /** 5 /**
6 * Overrided metadata worker's path. 6 * Overrided metadata worker's path.
7 * @type {string} 7 * @type {string}
8 */ 8 */
9 ContentMetadataProvider.WORKER_SCRIPT = '/js/metadata_worker.js'; 9 ContentMetadataProvider.WORKER_SCRIPT = '/js/metadata_worker.js';
10 10
11 /** 11 /**
12 * @param {Element} container Container element. 12 * @param {Element} container Container element.
13 * @constructor 13 * @constructor
14 */ 14 */
15 function AudioPlayer(container) { 15 function AudioPlayer(container) {
16 this.container_ = container; 16 this.container_ = container;
17 this.volumeManager_ = new VolumeManagerWrapper( 17 this.volumeManager_ = new VolumeManagerWrapper(
18 VolumeManagerWrapper.NonNativeVolumeStatus.ENABLED); 18 VolumeManagerWrapper.NonNativeVolumeStatus.ENABLED);
19 this.metadataModel_ = MetadataModel.create(this.volumeManager_); 19 this.metadataModel_ = MetadataModel.create(this.volumeManager_);
20 this.selectedEntry_ = null; 20 this.selectedEntry_ = null;
21 this.invalidTracks_ = {}; 21 this.invalidTracks_ = {};
22 22
23 this.model_ = new AudioPlayerModel(); 23 this.model_ = new AudioPlayerModel();
24 Object.observe(this.model_, function(changes) { 24 Object.observe(this.model_, function(changes) {
25 for (var i = 0; i < changes.length; i++) { 25 for (var i = 0; i < changes.length; i++) {
26 var change = changes[i]; 26 var change = changes[i];
27 if (change.name === 'expanded' && 27 if (change.name == 'expanded' &&
28 (change.type === 'add' || change.type === 'update')) { 28 (change.type == 'add' || change.type == 'update')) {
29 this.onModelExpandedChanged(change.oldValue, change.object.expanded); 29 this.onModelExpandedChanged(change.oldValue, change.object.expanded);
30 break; 30 break;
31 } else if (change.name === 'volumeSliderShown' &&
32 (change.type === 'add' || change.type === 'update')) {
33 this.onModelVolumeSliderShownChanged();
34 break;
35 } 31 }
36 } 32 }
37 }.bind(this)); 33 }.bind(this));
38 34
39 this.entries_ = []; 35 this.entries_ = [];
40 this.currentTrackIndex_ = -1; 36 this.currentTrackIndex_ = -1;
41 this.playlistGeneration_ = 0; 37 this.playlistGeneration_ = 0;
42 38
43 /** 39 /**
44 * Whether if the playlist is expanded or not. This value is changed by 40 * Whether if the playlist is expanded or not. This value is changed by
(...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after
281 }; 277 };
282 278
283 /** 279 /**
284 * Toggles the expanded mode when resizing. 280 * Toggles the expanded mode when resizing.
285 * 281 *
286 * @param {Event} event Resize event. 282 * @param {Event} event Resize event.
287 * @private 283 * @private
288 */ 284 */
289 AudioPlayer.prototype.onResize_ = function(event) { 285 AudioPlayer.prototype.onResize_ = function(event) {
290 if (!this.isExpanded_ && 286 if (!this.isExpanded_ &&
291 window.innerHeight >= this.getExpandedModeMinHeight_()) { 287 window.innerHeight >= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
292 this.isExpanded_ = true; 288 this.isExpanded_ = true;
293 this.player_.expanded = true; 289 this.player_.expanded = true;
294 } else if (this.isExpanded_ && 290 } else if (this.isExpanded_ &&
295 window.innerHeight < this.getExpandedModeMinHeight_()) { 291 window.innerHeight < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
296 this.isExpanded_ = false; 292 this.isExpanded_ = false;
297 this.player_.expanded = false; 293 this.player_.expanded = false;
298 } 294 }
299 }; 295 };
300 296
301 /** 297 /**
302 * Handles keydown event to open inspector with shortcut keys. 298 * Handles keydown event to open inspector with shortcut keys.
303 * 299 *
304 * @param {Event} event KeyDown event. 300 * @param {Event} event KeyDown event.
305 * @private 301 * @private
(...skipping 26 matching lines...) Expand all
332 AudioPlayer.HEADER_HEIGHT = 33; // 32px + border 1px 328 AudioPlayer.HEADER_HEIGHT = 33; // 32px + border 1px
333 329
334 /** 330 /**
335 * Track height in pixels. 331 * Track height in pixels.
336 * @type {number} 332 * @type {number}
337 * @const 333 * @const
338 */ 334 */
339 AudioPlayer.TRACK_HEIGHT = 48; 335 AudioPlayer.TRACK_HEIGHT = 48;
340 336
341 /** 337 /**
342 * Volume slider's height in pixels. 338 * Controls bar height in pixels.
343 * @type {number} 339 * @type {number}
344 * @const 340 * @const
345 */ 341 */
346 AudioPlayer.VOLUME_SLIDER_HEIGHT = 48; 342 AudioPlayer.CONTROLS_HEIGHT = 96;
347
348 /**
349 * Height of the control which has buttons such as play, next, shffule, etc...
350 * @type {number}
351 * @const
352 */
353 AudioPlayer.BUTTONS_CONTROL_HEIGHT = 48;
354
355 /**
356 * Height of the control which has progress slider, time, and duration.
357 * @type {number}
358 * @const
359 */
360 AudioPlayer.TIME_CONTROL_HEIGHT = 48;
361 343
362 /** 344 /**
363 * Default number of items in the expanded mode. 345 * Default number of items in the expanded mode.
364 * @type {number} 346 * @type {number}
365 * @const 347 * @const
366 */ 348 */
367 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5; 349 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
368 350
369 /** 351 /**
352 * Minimum size of the window in the expanded mode in pixels.
353 * @type {number}
354 * @const
355 */
356 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
357 AudioPlayer.TRACK_HEIGHT * 2;
358
359 /**
370 * Invoked when the 'expanded' property in the model is changed. 360 * Invoked when the 'expanded' property in the model is changed.
371 * @param {boolean} oldValue Old value. 361 * @param {boolean} oldValue Old value.
372 * @param {boolean} newValue New value. 362 * @param {boolean} newValue New value.
373 */ 363 */
374 AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) { 364 AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
375 if (this.isExpanded_ !== null && 365 if (this.isExpanded_ !== null &&
376 this.isExpanded_ === newValue) 366 this.isExpanded_ === newValue)
377 return; 367 return;
378 368
379 if (this.isExpanded_ && !newValue) 369 if (this.isExpanded_ && !newValue)
380 this.lastExpandedHeight_ = window.innerHeight; 370 this.lastExpandedHeight_ = window.innerHeight;
381 371
382 if (this.isExpanded_ !== newValue) { 372 if (this.isExpanded_ !== newValue) {
383 this.isExpanded_ = newValue; 373 this.isExpanded_ = newValue;
384 this.syncHeight_(); 374 this.syncHeight_();
385 375
386 // Saves new state. 376 // Saves new state.
387 window.appState.expanded = newValue; 377 window.appState.expanded = newValue;
388 util.saveAppState(); 378 util.saveAppState();
389 } 379 }
390 }; 380 };
391 381
392 /** 382 /**
393 * Invoked when the 'volumeSliderShown' property in the model is changed.
394 */
395 AudioPlayer.prototype.onModelVolumeSliderShownChanged = function() {
396 this.syncHeight_();
397 };
398
399 /**
400 * @private 383 * @private
401 */ 384 */
402 AudioPlayer.prototype.syncHeight_ = function() { 385 AudioPlayer.prototype.syncHeight_ = function() {
403 var targetHeight; 386 var targetHeight;
404 387
405 if (this.player_.expanded) { 388 if (this.player_.expanded) {
406 // Expanded. 389 // Expanded.
407 if (!this.lastExpandedHeight_ || 390 if (!this.lastExpandedHeight_ ||
408 this.lastExpandedHeight_ < this.getExpandedModeMinHeight_()) { 391 this.lastExpandedHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
409 var expandedListHeight = 392 var expandedListHeight =
410 Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) * 393 Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) *
411 AudioPlayer.TRACK_HEIGHT; 394 AudioPlayer.TRACK_HEIGHT;
412 targetHeight = this.getControlsHeight_() + expandedListHeight; 395 targetHeight = AudioPlayer.CONTROLS_HEIGHT + expandedListHeight;
413 this.lastExpandedHeight_ = targetHeight; 396 this.lastExpandedHeight_ = targetHeight;
414 } else { 397 } else {
415 targetHeight = this.lastExpandedHeight_; 398 targetHeight = this.lastExpandedHeight_;
416 } 399 }
417 } else { 400 } else {
418 // Not expanded. 401 // Not expanded.
419 targetHeight = this.getControlsHeight_() + AudioPlayer.TRACK_HEIGHT; 402 targetHeight = AudioPlayer.CONTROLS_HEIGHT + AudioPlayer.TRACK_HEIGHT;
420 } 403 }
421 404
422 window.resizeTo(window.innerWidth, targetHeight + AudioPlayer.HEADER_HEIGHT); 405 window.resizeTo(window.innerWidth, targetHeight + AudioPlayer.HEADER_HEIGHT);
423 }; 406 };
424 407
425 /** 408 /**
426 * Calculates the height of control panel.
427 * @return {number} Current height of control panel in pixels.
428 * @private
429 */
430 AudioPlayer.prototype.getControlsHeight_ = function() {
431 var height = AudioPlayer.BUTTONS_CONTROL_HEIGHT +
432 AudioPlayer.TIME_CONTROL_HEIGHT;
433 if (this.player_.volumeSliderShown)
434 height += AudioPlayer.VOLUME_SLIDER_HEIGHT;
435
436 return height;
437 };
438
439 /**
440 * Calculates the minium height of the app to show the playlist in expanded
441 * mode.
442 * @return {number} The minimum height of audio app window in which we can show
443 * the playlist in expanded mode.
444 * @private
445 */
446 AudioPlayer.prototype.getExpandedModeMinHeight_ = function() {
447 return this.getControlsHeight_() + AudioPlayer.TRACK_HEIGHT * 2;
448 };
449
450 /**
451 * Create a TrackInfo object encapsulating the information about one track. 409 * Create a TrackInfo object encapsulating the information about one track.
452 * 410 *
453 * @param {FileEntry} entry FileEntry to be retrieved the track info from. 411 * @param {FileEntry} entry FileEntry to be retrieved the track info from.
454 * @constructor 412 * @constructor
455 */ 413 */
456 AudioPlayer.TrackInfo = function(entry) { 414 AudioPlayer.TrackInfo = function(entry) {
457 this.url = entry.toURL(); 415 this.url = entry.toURL();
458 this.title = this.getDefaultTitle(); 416 this.title = this.getDefaultTitle();
459 this.artist = this.getDefaultArtist(); 417 this.artist = this.getDefaultArtist();
460 418
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
495 // TODO(yoshiki): Handle error in better way. 453 // TODO(yoshiki): Handle error in better way.
496 // TODO(yoshiki): implement artwork (metadata.thumbnail) 454 // TODO(yoshiki): implement artwork (metadata.thumbnail)
497 this.title = metadata.mediaTitle || this.getDefaultTitle(); 455 this.title = metadata.mediaTitle || this.getDefaultTitle();
498 this.artist = error || metadata.mediaArtist || this.getDefaultArtist(); 456 this.artist = error || metadata.mediaArtist || this.getDefaultArtist();
499 }; 457 };
500 458
501 // Starts loading the audio player. 459 // Starts loading the audio player.
502 window.addEventListener('DOMContentLoaded', function(e) { 460 window.addEventListener('DOMContentLoaded', function(e) {
503 AudioPlayer.load(); 461 AudioPlayer.load();
504 }); 462 });
OLDNEW
« no previous file with comments | « ui/file_manager/audio_player/elements/volume_controller.js ('k') | ui/file_manager/audio_player/js/audio_player_model.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698