| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 }); |
| OLD | NEW |