| OLD | NEW |
| (Empty) |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 'use strict'; | |
| 6 | |
| 7 /** | |
| 8 * TODO(mtomasz): Rewrite the entire audio player. | |
| 9 * | |
| 10 * @param {HTMLElement} container Container element. | |
| 11 * @constructor | |
| 12 */ | |
| 13 function AudioPlayer(container) { | |
| 14 this.container_ = container; | |
| 15 this.metadataCache_ = MetadataCache.createFull(); | |
| 16 this.currentTrack_ = -1; | |
| 17 this.playlistGeneration_ = 0; | |
| 18 this.volumeManager_ = new VolumeManagerWrapper( | |
| 19 VolumeManagerWrapper.DriveEnabledStatus.DRIVE_ENABLED); | |
| 20 | |
| 21 this.container_.classList.add('collapsed'); | |
| 22 | |
| 23 function createChild(opt_className, opt_tag) { | |
| 24 var child = container.ownerDocument.createElement(opt_tag || 'div'); | |
| 25 if (opt_className) | |
| 26 child.className = opt_className; | |
| 27 container.appendChild(child); | |
| 28 return child; | |
| 29 } | |
| 30 | |
| 31 // We create two separate containers (for expanded and compact view) and keep | |
| 32 // two sets of TrackInfo instances. We could fiddle with a single set instead | |
| 33 // but it would make keeping the list scroll position very tricky. | |
| 34 this.trackList_ = createChild('track-list'); | |
| 35 this.trackStack_ = createChild('track-stack'); | |
| 36 | |
| 37 createChild('title-button collapse').addEventListener( | |
| 38 'click', this.onExpandCollapse_.bind(this)); | |
| 39 | |
| 40 this.audioControls_ = new FullWindowAudioControls( | |
| 41 createChild(), this.advance_.bind(this), this.onError_.bind(this)); | |
| 42 | |
| 43 this.audioControls_.attachMedia(createChild('', 'audio')); | |
| 44 | |
| 45 chrome.fileBrowserPrivate.getStrings(function(strings) { | |
| 46 container.ownerDocument.title = strings['AUDIO_PLAYER_TITLE']; | |
| 47 this.errorString_ = strings['AUDIO_ERROR']; | |
| 48 this.offlineString_ = strings['AUDIO_OFFLINE']; | |
| 49 AudioPlayer.TrackInfo.DEFAULT_ARTIST = | |
| 50 strings['AUDIO_PLAYER_DEFAULT_ARTIST']; | |
| 51 }.bind(this)); | |
| 52 | |
| 53 this.volumeManager_.addEventListener('externally-unmounted', | |
| 54 this.onExternallyUnmounted_.bind(this)); | |
| 55 | |
| 56 window.addEventListener('resize', this.onResize_.bind(this)); | |
| 57 | |
| 58 // Show the window after DOM is processed. | |
| 59 var currentWindow = chrome.app.window.current(); | |
| 60 setTimeout(currentWindow.show.bind(currentWindow), 0); | |
| 61 } | |
| 62 | |
| 63 /** | |
| 64 * Initial load method (static). | |
| 65 */ | |
| 66 AudioPlayer.load = function() { | |
| 67 document.ondragstart = function(e) { e.preventDefault() }; | |
| 68 | |
| 69 // TODO(mtomasz): Consider providing an exact size icon, instead of relying | |
| 70 // on downsampling by ash. | |
| 71 chrome.app.window.current().setIcon('images/media/2x/audio_player.png'); | |
| 72 | |
| 73 AudioPlayer.instance = | |
| 74 new AudioPlayer(document.querySelector('.audio-player')); | |
| 75 reload(); | |
| 76 }; | |
| 77 | |
| 78 util.addPageLoadHandler(AudioPlayer.load); | |
| 79 | |
| 80 /** | |
| 81 * Unload the player. | |
| 82 */ | |
| 83 function unload() { | |
| 84 if (AudioPlayer.instance) | |
| 85 AudioPlayer.instance.onUnload(); | |
| 86 } | |
| 87 | |
| 88 /** | |
| 89 * Reload the player. | |
| 90 */ | |
| 91 function reload() { | |
| 92 if (window.appState) { | |
| 93 util.saveAppState(); | |
| 94 AudioPlayer.instance.load(window.appState); | |
| 95 return; | |
| 96 } | |
| 97 } | |
| 98 | |
| 99 /** | |
| 100 * Load a new playlist. | |
| 101 * @param {Playlist} playlist Playlist object passed via mediaPlayerPrivate. | |
| 102 */ | |
| 103 AudioPlayer.prototype.load = function(playlist) { | |
| 104 this.playlistGeneration_++; | |
| 105 this.audioControls_.pause(); | |
| 106 this.currentTrack_ = -1; | |
| 107 this.urls_ = playlist.items; | |
| 108 | |
| 109 this.invalidTracks_ = {}; | |
| 110 this.cancelAutoAdvance_(); | |
| 111 | |
| 112 if (this.urls_.length <= 1) | |
| 113 this.container_.classList.add('single-track'); | |
| 114 else | |
| 115 this.container_.classList.remove('single-track'); | |
| 116 | |
| 117 this.syncHeight_(); | |
| 118 | |
| 119 this.trackList_.textContent = ''; | |
| 120 this.trackStack_.textContent = ''; | |
| 121 | |
| 122 this.trackListItems_ = []; | |
| 123 this.trackStackItems_ = []; | |
| 124 | |
| 125 if (this.urls_.length == 0) | |
| 126 return; | |
| 127 | |
| 128 for (var i = 0; i != this.urls_.length; i++) { | |
| 129 var url = this.urls_[i]; | |
| 130 var onClick = this.select_.bind(this, i, false /* no restore */); | |
| 131 this.trackListItems_.push( | |
| 132 new AudioPlayer.TrackInfo(this.trackList_, url, onClick)); | |
| 133 this.trackStackItems_.push( | |
| 134 new AudioPlayer.TrackInfo(this.trackStack_, url, onClick)); | |
| 135 } | |
| 136 | |
| 137 this.select_(playlist.position, !!playlist.time); | |
| 138 | |
| 139 // This class will be removed if at least one track has art. | |
| 140 this.container_.classList.add('noart'); | |
| 141 | |
| 142 // Load the selected track metadata first, then load the rest. | |
| 143 this.loadMetadata_(playlist.position); | |
| 144 for (i = 0; i != this.urls_.length; i++) { | |
| 145 if (i != playlist.position) | |
| 146 this.loadMetadata_(i); | |
| 147 } | |
| 148 }; | |
| 149 | |
| 150 /** | |
| 151 * Load metadata for a track. | |
| 152 * @param {number} track Track number. | |
| 153 * @private | |
| 154 */ | |
| 155 AudioPlayer.prototype.loadMetadata_ = function(track) { | |
| 156 this.fetchMetadata_( | |
| 157 this.urls_[track], this.displayMetadata_.bind(this, track)); | |
| 158 }; | |
| 159 | |
| 160 /** | |
| 161 * Display track's metadata. | |
| 162 * @param {number} track Track number. | |
| 163 * @param {Object} metadata Metadata object. | |
| 164 * @param {string=} opt_error Error message. | |
| 165 * @private | |
| 166 */ | |
| 167 AudioPlayer.prototype.displayMetadata_ = function(track, metadata, opt_error) { | |
| 168 this.trackListItems_[track]. | |
| 169 setMetadata(metadata, this.container_, opt_error); | |
| 170 this.trackStackItems_[track]. | |
| 171 setMetadata(metadata, this.container_, opt_error); | |
| 172 }; | |
| 173 | |
| 174 /** | |
| 175 * Closes audio player when a volume containing the selected item is unmounted. | |
| 176 * @param {Event} event The unmount event. | |
| 177 * @private | |
| 178 */ | |
| 179 AudioPlayer.prototype.onExternallyUnmounted_ = function(event) { | |
| 180 if (!this.selectedItemFilesystemPath_) | |
| 181 return; | |
| 182 if (this.selectedItemFilesystemPath_.indexOf(event.mountPath) == 0) | |
| 183 close(); | |
| 184 }; | |
| 185 | |
| 186 /** | |
| 187 * Called on window is being unloaded. | |
| 188 */ | |
| 189 AudioPlayer.prototype.onUnload = function() { | |
| 190 this.audioControls_.cleanup(); | |
| 191 this.volumeManager_.dispose(); | |
| 192 }; | |
| 193 | |
| 194 /** | |
| 195 * Select a new track to play. | |
| 196 * @param {number} newTrack New track number. | |
| 197 * @param {boolean=} opt_restoreState True if restoring the play state from URL. | |
| 198 * @private | |
| 199 */ | |
| 200 AudioPlayer.prototype.select_ = function(newTrack, opt_restoreState) { | |
| 201 if (this.currentTrack_ == newTrack) return; | |
| 202 | |
| 203 this.changeSelectionInList_(this.currentTrack_, newTrack); | |
| 204 this.changeSelectionInStack_(this.currentTrack_, newTrack); | |
| 205 | |
| 206 this.currentTrack_ = newTrack; | |
| 207 | |
| 208 if (window.appState) { | |
| 209 window.appState.position = this.currentTrack_; | |
| 210 window.appState.time = 0; | |
| 211 util.saveAppState(); | |
| 212 } else { | |
| 213 util.platform.setPreference(AudioPlayer.TRACK_KEY, this.currentTrack_); | |
| 214 } | |
| 215 | |
| 216 this.scrollToCurrent_(false); | |
| 217 | |
| 218 var currentTrack = this.currentTrack_; | |
| 219 var url = this.urls_[currentTrack]; | |
| 220 this.fetchMetadata_(url, function(metadata) { | |
| 221 if (this.currentTrack_ != currentTrack) | |
| 222 return; | |
| 223 var src = url; | |
| 224 this.audioControls_.load(src, opt_restoreState); | |
| 225 | |
| 226 // Resolve real filesystem path of the current audio file. | |
| 227 this.selectedItemFilesystemPath_ = null; | |
| 228 webkitResolveLocalFileSystemURL(src, | |
| 229 function(entry) { | |
| 230 if (this.currentTrack_ != currentTrack) | |
| 231 return; | |
| 232 this.selectedItemFilesystemPath_ = entry.fullPath; | |
| 233 }.bind(this)); | |
| 234 }.bind(this)); | |
| 235 }; | |
| 236 | |
| 237 /** | |
| 238 * @param {string} url Track file url. | |
| 239 * @param {function(object)} callback Callback. | |
| 240 * @private | |
| 241 */ | |
| 242 AudioPlayer.prototype.fetchMetadata_ = function(url, callback) { | |
| 243 this.metadataCache_.get(url, 'thumbnail|media|streaming', | |
| 244 function(generation, metadata) { | |
| 245 // Do nothing if another load happened since the metadata request. | |
| 246 if (this.playlistGeneration_ == generation) | |
| 247 callback(metadata); | |
| 248 }.bind(this, this.playlistGeneration_)); | |
| 249 }; | |
| 250 | |
| 251 /** | |
| 252 * @param {number} oldTrack Old track number. | |
| 253 * @param {number} newTrack New track number. | |
| 254 * @private | |
| 255 */ | |
| 256 AudioPlayer.prototype.changeSelectionInList_ = function(oldTrack, newTrack) { | |
| 257 this.trackListItems_[newTrack].getBox().classList.add('selected'); | |
| 258 | |
| 259 if (oldTrack >= 0) { | |
| 260 this.trackListItems_[oldTrack].getBox().classList.remove('selected'); | |
| 261 } | |
| 262 }; | |
| 263 | |
| 264 /** | |
| 265 * @param {number} oldTrack Old track number. | |
| 266 * @param {number} newTrack New track number. | |
| 267 * @private | |
| 268 */ | |
| 269 AudioPlayer.prototype.changeSelectionInStack_ = function(oldTrack, newTrack) { | |
| 270 var newBox = this.trackStackItems_[newTrack].getBox(); | |
| 271 newBox.classList.add('selected'); // Put on top immediately. | |
| 272 newBox.classList.add('visible'); // Start fading in. | |
| 273 | |
| 274 if (oldTrack >= 0) { | |
| 275 var oldBox = this.trackStackItems_[oldTrack].getBox(); | |
| 276 oldBox.classList.remove('selected'); // Put under immediately. | |
| 277 setTimeout(function() { | |
| 278 if (!oldBox.classList.contains('selected')) { | |
| 279 // This will start fading out which is not really necessary because | |
| 280 // oldBox is already completely obscured by newBox. | |
| 281 oldBox.classList.remove('visible'); | |
| 282 } | |
| 283 }, 300); | |
| 284 } | |
| 285 }; | |
| 286 | |
| 287 /** | |
| 288 * Scrolls the current track into the viewport. | |
| 289 * | |
| 290 * @param {boolean} keepAtBottom If true, make the selected track the last | |
| 291 * of the visible (if possible). If false, perform minimal scrolling. | |
| 292 * @private | |
| 293 */ | |
| 294 AudioPlayer.prototype.scrollToCurrent_ = function(keepAtBottom) { | |
| 295 var box = this.trackListItems_[this.currentTrack_].getBox(); | |
| 296 this.trackList_.scrollTop = Math.max( | |
| 297 keepAtBottom ? 0 : Math.min(box.offsetTop, this.trackList_.scrollTop), | |
| 298 box.offsetTop + box.offsetHeight - this.trackList_.clientHeight); | |
| 299 }; | |
| 300 | |
| 301 /** | |
| 302 * @return {boolean} True if the player is be displayed in compact mode. | |
| 303 * @private | |
| 304 */ | |
| 305 AudioPlayer.prototype.isCompact_ = function() { | |
| 306 return this.container_.classList.contains('collapsed') || | |
| 307 this.container_.classList.contains('single-track'); | |
| 308 }; | |
| 309 | |
| 310 /** | |
| 311 * Go to the previous or the next track. | |
| 312 * @param {boolean} forward True if next, false if previous. | |
| 313 * @param {boolean=} opt_onlyIfValid True if invalid tracks should be selected. | |
| 314 * @private | |
| 315 */ | |
| 316 AudioPlayer.prototype.advance_ = function(forward, opt_onlyIfValid) { | |
| 317 this.cancelAutoAdvance_(); | |
| 318 | |
| 319 var newTrack = this.currentTrack_ + (forward ? 1 : -1); | |
| 320 if (newTrack < 0) newTrack = this.urls_.length - 1; | |
| 321 if (newTrack == this.urls_.length) newTrack = 0; | |
| 322 if (opt_onlyIfValid && this.invalidTracks_[newTrack]) | |
| 323 return; | |
| 324 this.select_(newTrack); | |
| 325 }; | |
| 326 | |
| 327 /** | |
| 328 * Media error handler. | |
| 329 * @private | |
| 330 */ | |
| 331 AudioPlayer.prototype.onError_ = function() { | |
| 332 var track = this.currentTrack_; | |
| 333 | |
| 334 this.invalidTracks_[track] = true; | |
| 335 | |
| 336 this.fetchMetadata_( | |
| 337 this.urls_[track], | |
| 338 function(metadata) { | |
| 339 var error = (!navigator.onLine && metadata.streaming) ? | |
| 340 this.offlineString_ : this.errorString_; | |
| 341 this.displayMetadata_(track, metadata, error); | |
| 342 this.scheduleAutoAdvance_(); | |
| 343 }.bind(this)); | |
| 344 }; | |
| 345 | |
| 346 /** | |
| 347 * Schedule automatic advance to the next track after a timeout. | |
| 348 * @private | |
| 349 */ | |
| 350 AudioPlayer.prototype.scheduleAutoAdvance_ = function() { | |
| 351 this.cancelAutoAdvance_(); | |
| 352 this.autoAdvanceTimer_ = setTimeout( | |
| 353 function() { | |
| 354 this.autoAdvanceTimer_ = null; | |
| 355 // We are advancing only if the next track is not known to be invalid. | |
| 356 // This prevents an endless auto-advancing in the case when all tracks | |
| 357 // are invalid (we will only visit each track once). | |
| 358 this.advance_(true /* forward */, true /* only if valid */); | |
| 359 }.bind(this), | |
| 360 3000); | |
| 361 }; | |
| 362 | |
| 363 /** | |
| 364 * Cancel the scheduled auto advance. | |
| 365 * @private | |
| 366 */ | |
| 367 AudioPlayer.prototype.cancelAutoAdvance_ = function() { | |
| 368 if (this.autoAdvanceTimer_) { | |
| 369 clearTimeout(this.autoAdvanceTimer_); | |
| 370 this.autoAdvanceTimer_ = null; | |
| 371 } | |
| 372 }; | |
| 373 | |
| 374 /** | |
| 375 * Expand/collapse button click handler. Toggles the mode and updates the | |
| 376 * height of the window. | |
| 377 * | |
| 378 * @private | |
| 379 */ | |
| 380 AudioPlayer.prototype.onExpandCollapse_ = function() { | |
| 381 if (!this.isCompact_()) { | |
| 382 this.setExpanded_(false); | |
| 383 this.lastExpandedHeight_ = window.innerHeight; | |
| 384 } else { | |
| 385 this.setExpanded_(true); | |
| 386 } | |
| 387 this.syncHeight_(); | |
| 388 }; | |
| 389 | |
| 390 /** | |
| 391 * Toggles the current expand mode. | |
| 392 * | |
| 393 * @param {boolean} on True if on, false otherwise. | |
| 394 * @private | |
| 395 */ | |
| 396 AudioPlayer.prototype.setExpanded_ = function(on) { | |
| 397 if (on) { | |
| 398 this.container_.classList.remove('collapsed'); | |
| 399 this.scrollToCurrent_(true); | |
| 400 } else { | |
| 401 this.container_.classList.add('collapsed'); | |
| 402 } | |
| 403 }; | |
| 404 | |
| 405 /** | |
| 406 * Toggles the expanded mode when resizing. | |
| 407 * | |
| 408 * @param {Event} event Resize event. | |
| 409 * @private | |
| 410 */ | |
| 411 AudioPlayer.prototype.onResize_ = function(event) { | |
| 412 if (this.isCompact_() && | |
| 413 window.innerHeight >= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { | |
| 414 this.setExpanded_(true); | |
| 415 } else if (!this.isCompact_() && | |
| 416 window.innerHeight < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) { | |
| 417 this.setExpanded_(false); | |
| 418 } | |
| 419 }; | |
| 420 | |
| 421 /* Keep the below constants in sync with the CSS. */ | |
| 422 | |
| 423 /** | |
| 424 * Window header size in pixels. | |
| 425 * @type {number} | |
| 426 * @const | |
| 427 */ | |
| 428 AudioPlayer.HEADER_HEIGHT = 28; | |
| 429 | |
| 430 /** | |
| 431 * Track height in pixels. | |
| 432 * @type {number} | |
| 433 * @const | |
| 434 */ | |
| 435 AudioPlayer.TRACK_HEIGHT = 58; | |
| 436 | |
| 437 /** | |
| 438 * Controls bar height in pixels. | |
| 439 * @type {number} | |
| 440 * @const | |
| 441 */ | |
| 442 AudioPlayer.CONTROLS_HEIGHT = 35; | |
| 443 | |
| 444 /** | |
| 445 * Default number of items in the expanded mode. | |
| 446 * @type {number} | |
| 447 * @const | |
| 448 */ | |
| 449 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5; | |
| 450 | |
| 451 /** | |
| 452 * Minimum size of the window in the expanded mode in pixels. | |
| 453 * @type {number} | |
| 454 * @const | |
| 455 */ | |
| 456 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT + | |
| 457 AudioPlayer.TRACK_HEIGHT * 2; | |
| 458 | |
| 459 /** | |
| 460 * Set the correct player window height. | |
| 461 * @private | |
| 462 */ | |
| 463 AudioPlayer.prototype.syncHeight_ = function() { | |
| 464 var targetHeight; | |
| 465 | |
| 466 if (!this.isCompact_()) { | |
| 467 // Expanded. | |
| 468 if (this.lastExpandedHeight_) { | |
| 469 targetHeight = this.lastExpandedHeight_; | |
| 470 } else { | |
| 471 var expandedListHeight = | |
| 472 Math.min(this.urls_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) * | |
| 473 AudioPlayer.TRACK_HEIGHT; | |
| 474 targetHeight = AudioPlayer.CONTROLS_HEIGHT + expandedListHeight; | |
| 475 } | |
| 476 } else { | |
| 477 // Not expaned. | |
| 478 targetHeight = AudioPlayer.CONTROLS_HEIGHT + AudioPlayer.TRACK_HEIGHT; | |
| 479 } | |
| 480 | |
| 481 window.resizeTo(window.innerWidth, targetHeight + AudioPlayer.HEADER_HEIGHT); | |
| 482 }; | |
| 483 | |
| 484 /** | |
| 485 * Create a TrackInfo object encapsulating the information about one track. | |
| 486 * | |
| 487 * @param {HTMLElement} container Container element. | |
| 488 * @param {string} url Track url. | |
| 489 * @param {function} onClick Click handler. | |
| 490 * @constructor | |
| 491 */ | |
| 492 AudioPlayer.TrackInfo = function(container, url, onClick) { | |
| 493 this.url_ = url; | |
| 494 | |
| 495 var doc = container.ownerDocument; | |
| 496 | |
| 497 this.box_ = doc.createElement('div'); | |
| 498 this.box_.className = 'track'; | |
| 499 this.box_.addEventListener('click', onClick); | |
| 500 container.appendChild(this.box_); | |
| 501 | |
| 502 this.art_ = doc.createElement('div'); | |
| 503 this.art_.className = 'art blank'; | |
| 504 this.box_.appendChild(this.art_); | |
| 505 | |
| 506 this.img_ = doc.createElement('img'); | |
| 507 this.art_.appendChild(this.img_); | |
| 508 | |
| 509 this.data_ = doc.createElement('div'); | |
| 510 this.data_.className = 'data'; | |
| 511 this.box_.appendChild(this.data_); | |
| 512 | |
| 513 this.title_ = doc.createElement('div'); | |
| 514 this.title_.className = 'data-title'; | |
| 515 this.data_.appendChild(this.title_); | |
| 516 | |
| 517 this.artist_ = doc.createElement('div'); | |
| 518 this.artist_.className = 'data-artist'; | |
| 519 this.data_.appendChild(this.artist_); | |
| 520 }; | |
| 521 | |
| 522 /** | |
| 523 * @return {HTMLDivElement} The wrapper element for the track. | |
| 524 */ | |
| 525 AudioPlayer.TrackInfo.prototype.getBox = function() { return this.box_ }; | |
| 526 | |
| 527 /** | |
| 528 * @return {string} Default track title (file name extracted from the url). | |
| 529 */ | |
| 530 AudioPlayer.TrackInfo.prototype.getDefaultTitle = function() { | |
| 531 var title = this.url_.split('/').pop(); | |
| 532 var dotIndex = title.lastIndexOf('.'); | |
| 533 if (dotIndex >= 0) title = title.substr(0, dotIndex); | |
| 534 title = decodeURIComponent(title); | |
| 535 return title; | |
| 536 }; | |
| 537 | |
| 538 /** | |
| 539 * TODO(kaznacheev): Localize. | |
| 540 */ | |
| 541 AudioPlayer.TrackInfo.DEFAULT_ARTIST = 'Unknown Artist'; | |
| 542 | |
| 543 /** | |
| 544 * @return {string} 'Unknown artist' string. | |
| 545 */ | |
| 546 AudioPlayer.TrackInfo.prototype.getDefaultArtist = function() { | |
| 547 return AudioPlayer.TrackInfo.DEFAULT_ARTIST; | |
| 548 }; | |
| 549 | |
| 550 /** | |
| 551 * @param {Object} metadata The metadata object. | |
| 552 * @param {HTMLElement} container The container for the tracks. | |
| 553 * @param {string} error Error string. | |
| 554 */ | |
| 555 AudioPlayer.TrackInfo.prototype.setMetadata = function( | |
| 556 metadata, container, error) { | |
| 557 if (error) { | |
| 558 this.art_.classList.add('blank'); | |
| 559 this.art_.classList.add('error'); | |
| 560 container.classList.remove('noart'); | |
| 561 } else if (metadata.thumbnail && metadata.thumbnail.url) { | |
| 562 this.img_.onload = function() { | |
| 563 // Only display the image if the thumbnail loaded successfully. | |
| 564 this.art_.classList.remove('blank'); | |
| 565 container.classList.remove('noart'); | |
| 566 }.bind(this); | |
| 567 this.img_.src = metadata.thumbnail.url; | |
| 568 } | |
| 569 this.title_.textContent = (metadata.media && metadata.media.title) || | |
| 570 this.getDefaultTitle(); | |
| 571 this.artist_.textContent = error || | |
| 572 (metadata.media && metadata.media.artist) || this.getDefaultArtist(); | |
| 573 }; | |
| 574 | |
| 575 /** | |
| 576 * Audio controls specific for the Audio Player. | |
| 577 * | |
| 578 * @param {HTMLElement} container Parent container. | |
| 579 * @param {function(boolean)} advanceTrack Parameter: true=forward. | |
| 580 * @param {function} onError Error handler. | |
| 581 * @constructor | |
| 582 */ | |
| 583 function FullWindowAudioControls(container, advanceTrack, onError) { | |
| 584 AudioControls.apply(this, arguments); | |
| 585 | |
| 586 document.addEventListener('keydown', function(e) { | |
| 587 if (e.keyIdentifier == 'U+0020') { | |
| 588 this.togglePlayState(); | |
| 589 e.preventDefault(); | |
| 590 } | |
| 591 }.bind(this)); | |
| 592 } | |
| 593 | |
| 594 FullWindowAudioControls.prototype = { __proto__: AudioControls.prototype }; | |
| 595 | |
| 596 /** | |
| 597 * Enable play state restore from the location hash. | |
| 598 * @param {string} src Source URL. | |
| 599 * @param {boolean} restore True if need to restore the play state. | |
| 600 */ | |
| 601 FullWindowAudioControls.prototype.load = function(src, restore) { | |
| 602 this.media_.src = src; | |
| 603 this.media_.load(); | |
| 604 this.restoreWhenLoaded_ = restore; | |
| 605 }; | |
| 606 | |
| 607 /** | |
| 608 * Save the current state so that it survives page/app reload. | |
| 609 */ | |
| 610 FullWindowAudioControls.prototype.onPlayStateChanged = function() { | |
| 611 this.encodeState(); | |
| 612 }; | |
| 613 | |
| 614 /** | |
| 615 * Restore the state after page/app reload. | |
| 616 */ | |
| 617 FullWindowAudioControls.prototype.restorePlayState = function() { | |
| 618 if (this.restoreWhenLoaded_) { | |
| 619 this.restoreWhenLoaded_ = false; // This should only work once. | |
| 620 if (this.decodeState()) | |
| 621 return; | |
| 622 } | |
| 623 this.play(); | |
| 624 }; | |
| OLD | NEW |