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 |
(...skipping 16 matching lines...) Expand all Loading... |
27 * Whether if the playlist is expanded or not. This value is changed by | 27 * Whether if the playlist is expanded or not. This value is changed by |
28 * this.syncPlaylistExpanded(). | 28 * this.syncPlaylistExpanded(). |
29 * True: expanded, false: collapsed, null: unset. | 29 * True: expanded, false: collapsed, null: unset. |
30 * | 30 * |
31 * @type {?boolean} | 31 * @type {?boolean} |
32 * @private | 32 * @private |
33 */ | 33 */ |
34 // Initial value is null. It'll be set in load(). | 34 // Initial value is null. It'll be set in load(). |
35 this.isPlaylistExpanded_ = null; | 35 this.isPlaylistExpanded_ = null; |
36 | 36 |
| 37 /** |
| 38 * Whether if the trackinfo is expanded or not. |
| 39 * True: expanded, false: collapsed, null: unset. |
| 40 * |
| 41 * @type {?boolean} |
| 42 * @private |
| 43 */ |
| 44 // Initial value is null. It'll be set in load(). |
| 45 this.isTrackInfoExpanded_ = null; |
| 46 |
37 this.player_ = | 47 this.player_ = |
38 /** @type {AudioPlayerElement} */ (document.querySelector('audio-player')); | 48 /** @type {AudioPlayerElement} */ (document.querySelector('audio-player')); |
39 this.player_.tracks = []; | 49 this.player_.tracks = []; |
40 | 50 |
41 // Restore the saved state from local storage, and update the local storage | 51 // Restore the saved state from local storage, and update the local storage |
42 // if the states are changed. | 52 // if the states are changed. |
43 var STORAGE_PREFIX = 'audioplayer-'; | 53 var STORAGE_PREFIX = 'audioplayer-'; |
44 var KEYS_TO_SAVE_STATES = | 54 var KEYS_TO_SAVE_STATES = |
45 ['shuffle', 'repeat', 'volume', 'playlist-expanded']; | 55 ['shuffle', |
| 56 'repeat', |
| 57 'volume', |
| 58 'playlist-expanded', |
| 59 'track-info-expanded']; |
46 var storageKeys = KEYS_TO_SAVE_STATES.map(a => STORAGE_PREFIX + a); | 60 var storageKeys = KEYS_TO_SAVE_STATES.map(a => STORAGE_PREFIX + a); |
47 chrome.storage.local.get(storageKeys, function(results) { | 61 chrome.storage.local.get(storageKeys, function(results) { |
48 // Update the UI by loaded state. | 62 // Update the UI by loaded state. |
49 for (var storageKey in results) { | 63 for (var storageKey in results) { |
50 var key = storageKey.substr(STORAGE_PREFIX.length); | 64 var key = storageKey.substr(STORAGE_PREFIX.length); |
51 this.player_[Polymer.CaseMap.dashToCamelCase(key)] = results[storageKey]; | 65 this.player_[Polymer.CaseMap.dashToCamelCase(key)] = results[storageKey]; |
52 } | 66 } |
53 // Start listening to UI changes to write back the states to local storage. | 67 // Start listening to UI changes to write back the states to local storage. |
54 for (var i = 0; i < KEYS_TO_SAVE_STATES.length; i++) { | 68 for (var i = 0; i < KEYS_TO_SAVE_STATES.length; i++) { |
55 this.player_.addEventListener( | 69 this.player_.addEventListener( |
56 KEYS_TO_SAVE_STATES[i] + '-changed', | 70 KEYS_TO_SAVE_STATES[i] + '-changed', |
57 function(storageKey, event) { | 71 function(storageKey, event) { |
58 var objectToBeSaved = {}; | 72 var objectToBeSaved = {}; |
59 objectToBeSaved[storageKey] = event.detail.value; | 73 objectToBeSaved[storageKey] = event.detail.value; |
60 chrome.storage.local.set(objectToBeSaved); | 74 chrome.storage.local.set(objectToBeSaved); |
61 }.bind(this, storageKeys[i])); | 75 }.bind(this, storageKeys[i])); |
62 } | 76 } |
63 }.bind(this)); | 77 }.bind(this)); |
64 | 78 |
65 // Update the window size when UI's 'expanded' state is changed. | 79 // Update the window size when UI's 'playlist-expanded' state is changed. |
66 this.player_.addEventListener('playlist-expanded-changed', function(event) { | 80 this.player_.addEventListener('playlist-expanded-changed', function(event) { |
67 this.onPlaylistExpandedChanged_(event.detail.value); | 81 this.onPlaylistExpandedChanged_(event.detail.value); |
68 }.bind(this)); | 82 }.bind(this)); |
69 | 83 |
| 84 // Update the window size when UI's 'track-info-expanded' state is changed. |
| 85 this.player_.addEventListener('track-info-expanded-changed', function(event) { |
| 86 this.onTrackInfoExpandedChanged_(event.detail.value); |
| 87 }.bind(this)); |
| 88 |
70 // Run asynchronously after an event of model change is delivered. | 89 // Run asynchronously after an event of model change is delivered. |
71 setTimeout(function() { | 90 setTimeout(function() { |
72 this.errorString_ = ''; | 91 this.errorString_ = ''; |
73 this.offlineString_ = ''; | 92 this.offlineString_ = ''; |
74 chrome.fileManagerPrivate.getStrings(function(strings) { | 93 chrome.fileManagerPrivate.getStrings(function(strings) { |
75 container.ownerDocument.title = strings['AUDIO_PLAYER_TITLE']; | 94 container.ownerDocument.title = strings['AUDIO_PLAYER_TITLE']; |
76 this.errorString_ = strings['AUDIO_ERROR']; | 95 this.errorString_ = strings['AUDIO_ERROR']; |
77 this.offlineString_ = strings['AUDIO_OFFLINE']; | 96 this.offlineString_ = strings['AUDIO_OFFLINE']; |
78 AudioPlayer.TrackInfo.DEFAULT_ARTIST = | 97 AudioPlayer.TrackInfo.DEFAULT_ARTIST = |
79 strings['AUDIO_PLAYER_DEFAULT_ARTIST']; | 98 strings['AUDIO_PLAYER_DEFAULT_ARTIST']; |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
141 this.playlistGeneration_++; | 160 this.playlistGeneration_++; |
142 this.currentTrackIndex_ = -1; | 161 this.currentTrackIndex_ = -1; |
143 | 162 |
144 // Save the app state, in case of restart. Make a copy of the object, so the | 163 // Save the app state, in case of restart. Make a copy of the object, so the |
145 // playlist member is not changed after entries are resolved. | 164 // playlist member is not changed after entries are resolved. |
146 window.appState = /** @type {Playlist} */ ( | 165 window.appState = /** @type {Playlist} */ ( |
147 JSON.parse(JSON.stringify(playlist))); // cloning | 166 JSON.parse(JSON.stringify(playlist))); // cloning |
148 util.saveAppState(); | 167 util.saveAppState(); |
149 | 168 |
150 this.isPlaylistExpanded_ = this.player_.playlistExpanded; | 169 this.isPlaylistExpanded_ = this.player_.playlistExpanded; |
| 170 this.isTrackInfoExpanded_ = this.player_.trackInfoExpanded; |
151 | 171 |
152 // Resolving entries has to be done after the volume manager is initialized. | 172 // Resolving entries has to be done after the volume manager is initialized. |
153 this.volumeManager_.ensureInitialized(function() { | 173 this.volumeManager_.ensureInitialized(function() { |
154 util.URLsToEntries(playlist.items || [], function(entries) { | 174 util.URLsToEntries(playlist.items || [], function(entries) { |
155 this.entries_ = entries; | 175 this.entries_ = entries; |
156 | 176 |
157 var position = playlist.position || 0; | 177 var position = playlist.position || 0; |
158 var time = playlist.time || 0; | 178 var time = playlist.time || 0; |
159 | 179 |
160 if (this.entries_.length == 0) | 180 if (this.entries_.length == 0) |
(...skipping 144 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
305 }.bind(this)); | 325 }.bind(this)); |
306 }; | 326 }; |
307 | 327 |
308 /** | 328 /** |
309 * Toggles the expanded mode when resizing. | 329 * Toggles the expanded mode when resizing. |
310 * | 330 * |
311 * @param {Event} event Resize event. | 331 * @param {Event} event Resize event. |
312 * @private | 332 * @private |
313 */ | 333 */ |
314 AudioPlayer.prototype.onResize_ = function(event) { | 334 AudioPlayer.prototype.onResize_ = function(event) { |
315 if (!this.isPlaylistExpanded_ && | 335 var trackListHeight = this.player_.$.trackList.clientHeight; |
316 window.innerHeight > AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { | 336 if (trackListHeight > AudioPlayer.TOP_PADDING_HEIGHT) { |
317 this.isPlaylistExpanded_ = true; | 337 this.isPlaylistExpanded_ = true; |
318 this.player_.playlistExpanded = true; | 338 this.player_.playlistExpanded = true; |
319 } else if (this.isPlaylistExpanded_ && | 339 } else { |
320 window.innerHeight <= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { | |
321 this.isPlaylistExpanded_ = false; | 340 this.isPlaylistExpanded_ = false; |
322 this.player_.playlistExpanded = false; | 341 this.player_.playlistExpanded = false; |
323 } | 342 } |
324 }; | 343 }; |
325 | 344 |
326 /** | 345 /** |
327 * Handles keydown event to open inspector with shortcut keys. | 346 * Handles keydown event to open inspector with shortcut keys. |
328 * | 347 * |
329 * @param {Event} event KeyDown event. | 348 * @param {Event} event KeyDown event. |
330 * @private | 349 * @private |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
375 AudioPlayer.TRACK_HEIGHT = 48; | 394 AudioPlayer.TRACK_HEIGHT = 48; |
376 | 395 |
377 /** | 396 /** |
378 * artwork panel height in pixels, when it's closed. | 397 * artwork panel height in pixels, when it's closed. |
379 * @type {number} | 398 * @type {number} |
380 * @const | 399 * @const |
381 */ | 400 */ |
382 AudioPlayer.CLOSED_ARTWORK_HEIGHT = 48; | 401 AudioPlayer.CLOSED_ARTWORK_HEIGHT = 48; |
383 | 402 |
384 /** | 403 /** |
| 404 * artwork panel height in pixels, when it's opened. |
| 405 * @type {number} |
| 406 * @const |
| 407 */ |
| 408 AudioPlayer.EXPANDED_ARTWORK_HEIGHT = 320; |
| 409 |
| 410 /** |
385 * Controls bar height in pixels. | 411 * Controls bar height in pixels. |
386 * @type {number} | 412 * @type {number} |
387 * @const | 413 * @const |
388 */ | 414 */ |
389 AudioPlayer.CONTROLS_HEIGHT = 96; | 415 AudioPlayer.CONTROLS_HEIGHT = 96; |
390 | 416 |
391 /** | 417 /** |
392 * Default number of items in the expanded mode. | 418 * Default number of items in the expanded mode. |
393 * @type {number} | 419 * @type {number} |
394 * @const | 420 * @const |
395 */ | 421 */ |
396 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5; | 422 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5; |
397 | 423 |
398 /** | 424 /** |
399 * Minimum size of the window in the expanded mode in pixels. | 425 * Minimum size of the window in the expanded mode in pixels. |
400 * @type {number} | 426 * @type {number} |
401 * @const | 427 * @const |
402 */ | 428 */ |
403 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT + | 429 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT + |
404 AudioPlayer.CLOSED_ARTWORK_HEIGHT + | 430 AudioPlayer.EXPANDED_ARTWORK_HEIGHT + |
405 AudioPlayer.CONTROLS_HEIGHT; | 431 AudioPlayer.CONTROLS_HEIGHT; |
406 | 432 |
407 /** | 433 /** |
408 * Invoked when the 'expanded' property in the model is changed. | 434 * Minimum size of the window in the mode in pixels. |
| 435 * @type {number} |
| 436 * @const |
| 437 */ |
| 438 AudioPlayer.CLOSED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT + |
| 439 AudioPlayer.CLOSED_ARTWORK_HEIGHT + |
| 440 AudioPlayer.CONTROLS_HEIGHT; |
| 441 |
| 442 /** |
| 443 * Invoked when the 'playlist-expanded' property in the model is changed. |
409 * @param {boolean} newValue New value. | 444 * @param {boolean} newValue New value. |
410 * @private | 445 * @private |
411 */ | 446 */ |
412 AudioPlayer.prototype.onPlaylistExpandedChanged_ = function(newValue) { | 447 AudioPlayer.prototype.onPlaylistExpandedChanged_ = function(newValue) { |
413 if (this.isPlaylistExpanded_ !== null && | 448 if (this.isPlaylistExpanded_ !== null && |
414 this.isPlaylistExpanded_ === newValue) | 449 this.isPlaylistExpanded_ === newValue) |
415 return; | 450 return; |
416 | 451 |
417 if (this.isPlaylistExpanded_ && !newValue) | 452 if (this.isPlaylistExpanded_ && !newValue) |
418 this.lastExpandedInnerHeight_ = window.innerHeight; | 453 this.lastExpandedInnerHeight_ = window.innerHeight; |
419 | 454 |
420 if (this.isPlaylistExpanded_ !== newValue) { | 455 if (this.isPlaylistExpanded_ !== newValue) { |
421 this.isPlaylistExpanded_ = newValue; | 456 this.isPlaylistExpanded_ = newValue; |
422 this.syncHeight_(); | 457 this.syncHeightForPlaylist_(); |
423 | 458 |
424 // Saves new state. | 459 // Saves new state. |
425 window.appState.playlistExpanded = newValue; | 460 window.appState.playlistExpanded = newValue; |
426 util.saveAppState(); | 461 util.saveAppState(); |
427 } | 462 } |
428 }; | 463 }; |
429 | 464 |
430 /** | 465 /** |
| 466 * Invoked when the 'track-info-expanded' property in the model is changed. |
| 467 * @param {boolean} newValue New value. |
| 468 * @private |
| 469 */ |
| 470 AudioPlayer.prototype.onTrackInfoExpandedChanged_ = function(newValue) { |
| 471 if (this.isTrackInfoExpanded_ !== null && |
| 472 this.isTrackInfoExpanded_ === newValue) |
| 473 return; |
| 474 |
| 475 this.lastExpandedInnerHeight_ = window.innerHeight; |
| 476 |
| 477 if (this.isTrackInfoExpanded_ !== newValue) { |
| 478 this.isTrackInfoExpanded_ = newValue; |
| 479 var state = chrome.app.window.current() |
| 480 var newHeight = window.outerHeight; |
| 481 if (newValue) { |
| 482 state.innerBounds.minHeight = AudioPlayer.EXPANDED_MODE_MIN_HEIGHT; |
| 483 newHeight += AudioPlayer.EXPANDED_MODE_MIN_HEIGHT - |
| 484 AudioPlayer.CLOSED_MODE_MIN_HEIGHT; |
| 485 } else { |
| 486 state.innerBounds.minHeight = AudioPlayer.CLOSED_MODE_MIN_HEIGHT; |
| 487 newHeight -= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT - |
| 488 AudioPlayer.CLOSED_MODE_MIN_HEIGHT; |
| 489 } |
| 490 window.resizeTo(window.outerWidth, newHeight); |
| 491 |
| 492 // Saves new state. |
| 493 window.appState.isTrackInfoExpanded_ = newValue; |
| 494 util.saveAppState(); |
| 495 } |
| 496 }; |
| 497 |
| 498 /** |
431 * @private | 499 * @private |
432 */ | 500 */ |
433 AudioPlayer.prototype.syncHeight_ = function() { | 501 AudioPlayer.prototype.syncHeightForPlaylist_ = function() { |
434 var targetInnerHeight; | 502 var targetInnerHeight; |
435 | 503 |
436 if (this.player_.playlistExpanded) { | 504 if (this.player_.playlistExpanded) { |
437 // Expanded. | 505 // playllist expanded. |
438 if (!this.lastExpandedInnerHeight_ || | 506 if (!this.lastExpandedInnerHeight_ || |
439 this.lastExpandedInnerHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { | 507 this.lastExpandedInnerHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { |
440 var expandedListHeight = | 508 var expandedListHeight = |
441 Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) * | 509 Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) * |
442 AudioPlayer.TRACK_HEIGHT; | 510 AudioPlayer.TRACK_HEIGHT; |
443 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + | 511 if (this.player_.trackInfoExpanded) { |
444 expandedListHeight + | 512 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + |
445 AudioPlayer.CONTROLS_HEIGHT; | 513 AudioPlayer.EXPANDED_ARTWORK_HEIGHT + |
| 514 expandedListHeight + |
| 515 AudioPlayer.CONTROLS_HEIGHT; |
| 516 } else { |
| 517 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + |
| 518 AudioPlayer.TRACK_HEIGHT + |
| 519 expandedListHeight + |
| 520 AudioPlayer.CONTROLS_HEIGHT; |
| 521 } |
446 this.lastExpandedInnerHeight_ = targetInnerHeight; | 522 this.lastExpandedInnerHeight_ = targetInnerHeight; |
447 } else { | 523 } else { |
448 targetInnerHeight = this.lastExpandedInnerHeight_; | 524 targetInnerHeight = this.lastExpandedInnerHeight_; |
449 } | 525 } |
450 } else { | 526 } else { |
451 // Not expanded. | 527 // playllist not expanded. |
452 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + | 528 if (this.player_.trackInfoExpanded) { |
453 AudioPlayer.TRACK_HEIGHT + | 529 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + |
454 AudioPlayer.CONTROLS_HEIGHT; | 530 AudioPlayer.EXPANDED_ARTWORK_HEIGHT + |
| 531 AudioPlayer.CONTROLS_HEIGHT; |
| 532 } else { |
| 533 targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT + |
| 534 AudioPlayer.TRACK_HEIGHT + |
| 535 AudioPlayer.CONTROLS_HEIGHT; |
| 536 } |
455 } | 537 } |
456 window.resizeTo(window.outerWidth, | 538 window.resizeTo(window.outerWidth, |
457 AudioPlayer.HEADER_HEIGHT + targetInnerHeight); | 539 AudioPlayer.HEADER_HEIGHT + targetInnerHeight); |
458 }; | 540 }; |
459 | 541 |
460 /** | 542 /** |
461 * Create a TrackInfo object encapsulating the information about one track. | 543 * Create a TrackInfo object encapsulating the information about one track. |
462 * | 544 * |
463 * @param {FileEntry} entry FileEntry to be retrieved the track info from. | 545 * @param {FileEntry} entry FileEntry to be retrieved the track info from. |
464 * @constructor | 546 * @constructor |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
504 // TODO(yoshiki): Handle error in better way. | 586 // TODO(yoshiki): Handle error in better way. |
505 this.title = metadata.mediaTitle || this.getDefaultTitle(); | 587 this.title = metadata.mediaTitle || this.getDefaultTitle(); |
506 this.artist = error || metadata.mediaArtist || this.getDefaultArtist(); | 588 this.artist = error || metadata.mediaArtist || this.getDefaultArtist(); |
507 this.artworkUrl = metadata.contentThumbnailUrl || ""; | 589 this.artworkUrl = metadata.contentThumbnailUrl || ""; |
508 }; | 590 }; |
509 | 591 |
510 // Starts loading the audio player. | 592 // Starts loading the audio player. |
511 window.addEventListener('DOMContentLoaded', function(e) { | 593 window.addEventListener('DOMContentLoaded', function(e) { |
512 AudioPlayer.load(); | 594 AudioPlayer.load(); |
513 }); | 595 }); |
OLD | NEW |