ui/file_manager/audio_player/js/audio_player.js

   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 /**
   6  * Overrided metadata worker's path.
   7  * @type {string}
   8  * @const
   9  */
  10 ContentProvider.WORKER_SCRIPT = '/js/metadata_worker.js';
  11
  12 /**
  13  * @param {HTMLElement} container Container element.
  14  * @constructor
  15  */
  16 function AudioPlayer(container) {
  17   this.container_ = container;
  18   this.volumeManager_ = new VolumeManagerWrapper(
  19       VolumeManagerWrapper.DriveEnabledStatus.DRIVE_ENABLED);
  20   this.metadataCache_ = MetadataCache.createFull(this.volumeManager_);
  21   this.selectedEntry_ = null;
  22
  23   this.model_ = new AudioPlayerModel();
  24   var observer = new PathObserver(this.model_, 'expanded');
  25   observer.open(function(newValue, oldValue) {
  26     // Inverse arguments intentionally to match the Polymer way.
  27     this.onModelExpandedChanged(oldValue, newValue);
  28   }.bind(this));
  29
  30   this.entries_ = [];
  31   this.currentTrackIndex_ = -1;
  32   this.playlistGeneration_ = 0;
  33
  34   /**
  35    * Whether if the playlist is expanded or not. This value is changed by
  36    * this.syncExpanded().
  37    * True: expanded, false: collapsed, null: unset.
  38    *
  39    * @type {?boolean}
  40    * @private
  41    */
  42   this.isExpanded_ = null;  // Initial value is null. It'll be set in load().
  43
  44   this.player_ = document.querySelector('audio-player');
  45   // TODO(yoshiki): Move tracks into the model.
  46   this.player_.tracks = [];
  47   this.player_.model = this.model_;
  48   Platform.performMicrotaskCheckpoint();
  49
  50   this.errorString_ = '';
  51   this.offlineString_ = '';
  52   chrome.fileManagerPrivate.getStrings(function(strings) {
  53     container.ownerDocument.title = strings['AUDIO_PLAYER_TITLE'];
  54     this.errorString_ = strings['AUDIO_ERROR'];
  55     this.offlineString_ = strings['AUDIO_OFFLINE'];
  56     AudioPlayer.TrackInfo.DEFAULT_ARTIST =
  57         strings['AUDIO_PLAYER_DEFAULT_ARTIST'];
  58   }.bind(this));
  59
  60   this.volumeManager_.addEventListener('externally-unmounted',
  61       this.onExternallyUnmounted_.bind(this));
  62
  63   window.addEventListener('resize', this.onResize_.bind(this));
  64
  65   // Show the window after DOM is processed.
  66   var currentWindow = chrome.app.window.current();
  67   if (currentWindow)
  68     setTimeout(currentWindow.show.bind(currentWindow), 0);
  69 }
  70
  71 /**
  72  * Initial load method (static).
  73  */
  74 AudioPlayer.load = function() {
  75   document.ondragstart = function(e) { e.preventDefault() };
  76
  77   AudioPlayer.instance =
  78       new AudioPlayer(document.querySelector('.audio-player'));
  79
  80   reload();
  81 };
  82
  83 /**
  84  * Unloads the player.
  85  */
  86 function unload() {
  87   if (AudioPlayer.instance)
  88     AudioPlayer.instance.onUnload();
  89 }
  90
  91 /**
  92  * Reloads the player.
  93  */
  94 function reload() {
  95   AudioPlayer.instance.load(window.appState);
  96 }
  97
  98 /**
  99  * Loads a new playlist.
 100  * @param {Playlist} playlist Playlist object passed via mediaPlayerPrivate.
 101  */
 102 AudioPlayer.prototype.load = function(playlist) {
 103   this.playlistGeneration_++;
 104   this.currentTrackIndex_ = -1;
 105
 106   // Save the app state, in case of restart. Make a copy of the object, so the
 107   // playlist member is not changed after entries are resolved.
 108   window.appState = JSON.parse(JSON.stringify(playlist));  // cloning
 109   util.saveAppState();
 110
 111   this.isExpanded_ = this.model_.expanded;
 112
 113   // Resolving entries has to be done after the volume manager is initialized.
 114   this.volumeManager_.ensureInitialized(function() {
 115     util.URLsToEntries(playlist.items, function(entries) {
 116       this.entries_ = entries;
 117
 118       var position = playlist.position || 0;
 119       var time = playlist.time || 0;
 120
 121       if (this.entries_.length == 0)
 122         return;
 123
 124       var newTracks = [];
 125       var currentTracks = this.player_.tracks;
 126       var unchanged = (currentTracks.length === this.entries_.length);
 127
 128       for (var i = 0; i != this.entries_.length; i++) {
 129         var entry = this.entries_[i];
 130         var onClick = this.select_.bind(this, i);
 131         newTracks.push(new AudioPlayer.TrackInfo(entry, onClick));
 132
 133         if (unchanged && entry.toURL() !== currentTracks[i].url)
 134           unchanged = false;
 135       }
 136
 137       if (!unchanged) {
 138         this.player_.tracks = newTracks;
 139
 140         // Makes it sure that the handler of the track list is called, before
 141         // the handler of the track index.
 142         Platform.performMicrotaskCheckpoint();
 143       }
 144
 145       this.select_(position, !!time);
 146
 147       // Load the selected track metadata first, then load the rest.
 148       this.loadMetadata_(position);
 149       for (i = 0; i != this.entries_.length; i++) {
 150         if (i != position)
 151           this.loadMetadata_(i);
 152       }
 153     }.bind(this));
 154   }.bind(this));
 155 };
 156
 157 /**
 158  * Loads metadata for a track.
 159  * @param {number} track Track number.
 160  * @private
 161  */
 162 AudioPlayer.prototype.loadMetadata_ = function(track) {
 163   this.fetchMetadata_(
 164       this.entries_[track], this.displayMetadata_.bind(this, track));
 165 };
 166
 167 /**
 168  * Displays track's metadata.
 169  * @param {number} track Track number.
 170  * @param {Object} metadata Metadata object.
 171  * @param {string=} opt_error Error message.
 172  * @private
 173  */
 174 AudioPlayer.prototype.displayMetadata_ = function(track, metadata, opt_error) {
 175   this.player_.tracks[track].setMetadata(metadata, opt_error);
 176 };
 177
 178 /**
 179  * Closes audio player when a volume containing the selected item is unmounted.
 180  * @param {Event} event The unmount event.
 181  * @private
 182  */
 183 AudioPlayer.prototype.onExternallyUnmounted_ = function(event) {
 184   if (!this.selectedEntry_)
 185     return;
 186
 187   if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) ===
 188       event.volumeInfo)
 189     window.close();
 190 };
 191
 192 /**
 193  * Called on window is being unloaded.
 194  */
 195 AudioPlayer.prototype.onUnload = function() {
 196   if (this.player_)
 197     this.player_.onPageUnload();
 198
 199   if (this.volumeManager_)
 200     this.volumeManager_.dispose();
 201 };
 202
 203 /**
 204  * Selects a new track to play.
 205  * @param {number} newTrack New track number.
 206  * @param {number} time New playback position (in second).
 207  * @private
 208  */
 209 AudioPlayer.prototype.select_ = function(newTrack, time) {
 210   if (this.currentTrackIndex_ == newTrack) return;
 211
 212   this.currentTrackIndex_ = newTrack;
 213   this.player_.currentTrackIndex = this.currentTrackIndex_;
 214   this.player_.audioController.time = time;
 215   Platform.performMicrotaskCheckpoint();
 216
 217   if (!window.appReopen)
 218     this.player_.audioElement.play();
 219
 220   window.appState.position = this.currentTrackIndex_;
 221   window.appState.time = 0;
 222   util.saveAppState();
 223
 224   var entry = this.entries_[this.currentTrackIndex_];
 225
 226   this.fetchMetadata_(entry, function(metadata) {
 227     if (this.currentTrackIndex_ != newTrack)
 228       return;
 229
 230     this.selectedEntry_ = entry;
 231   }.bind(this));
 232 };
 233
 234 /**
 235  * @param {FileEntry} entry Track file entry.
 236  * @param {function(object)} callback Callback.
 237  * @private
 238  */
 239 AudioPlayer.prototype.fetchMetadata_ = function(entry, callback) {
 240   this.metadataCache_.getOne(entry, 'thumbnail|media|external',
 241       function(generation, metadata) {
 242         // Do nothing if another load happened since the metadata request.
 243         if (this.playlistGeneration_ == generation)
 244           callback(metadata);
 245       }.bind(this, this.playlistGeneration_));
 246 };
 247
 248 /**
 249  * Media error handler.
 250  * @private
 251  */
 252 AudioPlayer.prototype.onError_ = function() {
 253   var track = this.currentTrackIndex_;
 254
 255   this.invalidTracks_[track] = true;
 256
 257   this.fetchMetadata_(
 258       this.entries_[track],
 259       function(metadata) {
 260         var error = (!navigator.onLine && !metadata.external.present) ?
 261             this.offlineString_ : this.errorString_;
 262         this.displayMetadata_(track, metadata, error);
 263         this.scheduleAutoAdvance_();
 264       }.bind(this));
 265 };
 266
 267 /**
 268  * Toggles the expanded mode when resizing.
 269  *
 270  * @param {Event} event Resize event.
 271  * @private
 272  */
 273 AudioPlayer.prototype.onResize_ = function(event) {
 274   if (!this.isExpanded_ &&
 275       window.innerHeight >= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
 276     this.isExpanded_ = true;
 277     this.model_.expanded = true;
 278   } else if (this.isExpanded_ &&
 279              window.innerHeight < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
 280     this.isExpanded_ = false;
 281     this.model_.expanded = false;
 282   }
 283 };
 284
 285 /* Keep the below constants in sync with the CSS. */
 286
 287 /**
 288  * Window header size in pixels.
 289  * @type {number}
 290  * @const
 291  */
 292 AudioPlayer.HEADER_HEIGHT = 33;  // 32px + border 1px
 293
 294 /**
 295  * Track height in pixels.
 296  * @type {number}
 297  * @const
 298  */
 299 AudioPlayer.TRACK_HEIGHT = 44;
 300
 301 /**
 302  * Controls bar height in pixels.
 303  * @type {number}
 304  * @const
 305  */
 306 AudioPlayer.CONTROLS_HEIGHT = 73;  // 72px + border 1px
 307
 308 /**
 309  * Default number of items in the expanded mode.
 310  * @type {number}
 311  * @const
 312  */
 313 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
 314
 315 /**
 316  * Minimum size of the window in the expanded mode in pixels.
 317  * @type {number}
 318  * @const
 319  */
 320 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
 321                                        AudioPlayer.TRACK_HEIGHT * 2;
 322
 323 /**
 324  * Invoked when the 'expanded' property in the model is changed.
 325  * @param {boolean} oldValue Old value.
 326  * @param {boolean} newValue New value.
 327  */
 328 AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
 329   if (this.isExpanded_ !== null &&
 330       this.isExpanded_ === newValue)
 331     return;
 332
 333   if (this.isExpanded_ && !newValue)
 334     this.lastExpandedHeight_ = window.innerHeight;
 335
 336   if (this.isExpanded_ !== newValue) {
 337     this.isExpanded_ = newValue;
 338     this.syncHeight_();
 339
 340     // Saves new state.
 341     window.appState.expanded = newValue;
 342     util.saveAppState();
 343   }
 344 };
 345
 346 /**
 347  * @private
 348  */
 349 AudioPlayer.prototype.syncHeight_ = function() {
 350   var targetHeight;
 351
 352   if (this.model_.expanded) {
 353     // Expanded.
 354     if (!this.lastExpandedHeight_ ||
 355         this.lastExpandedHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
 356       var expandedListHeight =
 357           Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) *
 358               AudioPlayer.TRACK_HEIGHT;
 359       targetHeight = AudioPlayer.CONTROLS_HEIGHT + expandedListHeight;
 360       this.lastExpandedHeight_ = targetHeight;
 361     } else {
 362       targetHeight = this.lastExpandedHeight_;
 363     }
 364   } else {
 365     // Not expanded.
 366     targetHeight = AudioPlayer.CONTROLS_HEIGHT + AudioPlayer.TRACK_HEIGHT;
 367   }
 368
 369   window.resizeTo(window.innerWidth, targetHeight + AudioPlayer.HEADER_HEIGHT);
 370 };
 371
 372 /**
 373  * Create a TrackInfo object encapsulating the information about one track.
 374  *
 375  * @param {fileEntry} entry FileEntry to be retrieved the track info from.
 376  * @param {function} onClick Click handler.
 377  * @constructor
 378  */
 379 AudioPlayer.TrackInfo = function(entry, onClick) {
 380   this.url = entry.toURL();
 381   this.title = this.getDefaultTitle();
 382   this.artist = this.getDefaultArtist();
 383
 384   // TODO(yoshiki): implement artwork.
 385   this.artwork = null;
 386   this.active = false;
 387 };
 388
 389 /**
 390  * @return {HTMLDivElement} The wrapper element for the track.
 391  */
 392 AudioPlayer.TrackInfo.prototype.getBox = function() { return this.box_ };
 393
 394 /**
 395  * @return {string} Default track title (file name extracted from the url).
 396  */
 397 AudioPlayer.TrackInfo.prototype.getDefaultTitle = function() {
 398   var title = this.url.split('/').pop();
 399   var dotIndex = title.lastIndexOf('.');
 400   if (dotIndex >= 0) title = title.substr(0, dotIndex);
 401   title = decodeURIComponent(title);
 402   return title;
 403 };
 404
 405 /**
 406  * TODO(kaznacheev): Localize.
 407  */
 408 AudioPlayer.TrackInfo.DEFAULT_ARTIST = 'Unknown Artist';
 409
 410 /**
 411  * @return {string} 'Unknown artist' string.
 412  */
 413 AudioPlayer.TrackInfo.prototype.getDefaultArtist = function() {
 414   return AudioPlayer.TrackInfo.DEFAULT_ARTIST;
 415 };
 416
 417 /**
 418  * @param {Object} metadata The metadata object.
 419  * @param {string} error Error string.
 420  */
 421 AudioPlayer.TrackInfo.prototype.setMetadata = function(
 422     metadata, error) {
 423   // TODO(yoshiki): Handle error in better way.
 424   // TODO(yoshiki): implement artwork (metadata.thumbnail)
 425   this.title = (metadata.media && metadata.media.title) ||
 426       this.getDefaultTitle();
 427   this.artist = error ||
 428       (metadata.media && metadata.media.artist) || this.getDefaultArtist();
 429 };
 430
 431 // Starts loading the audio player.
 432 window.addEventListener('polymer-ready', function(e) {
 433   AudioPlayer.load();
 434 });