Quick View: Show year recorded metadata.

In metadata box of Quick View, we show year recorded metadata in mp3
files in any.
This CL also populates track metadata from the metadata in mp3 if any.
Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=636191#c22

BUG=636191
TEST=
1. Download a mp3 file from Google Music.
2. Open the file on Quick View
3. Confirm year recorded metadata is shown.
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2581133002
Cr-Commit-Position: refs/heads/master@{#439440}

ui/file_manager/file_manager/foreground/elements/files_metadata_box.html

@@ -61,6 +61,7 @@
         <files-metadata-entry i18n-values="key:METADATA_BOX_EXIF_DEVICE_MODEL" value="[[deviceModel_(ifd)]]"></files-metadata-entry>
         <files-metadata-entry i18n-values="key:METADATA_BOX_EXIF_DEVICE_SETTINGS" value="[[deviceSettings_(ifd)]]"></files-metadata-entry>
         <files-metadata-entry i18n-values="key:METADATA_BOX_EXIF_GEOGRAPHY" value="[[geography_(ifd)]]"></files-metadata-entry>
+        <files-metadata-entry i18n-values="key:METADATA_BOX_YEAR_RECORDED" value="[[mediaYearRecorded]]"></files-metadata-entry>
       </div>
     </div>
   </template>

ui/file_manager/file_manager/foreground/elements/files_metadata_box.js

@@ -43,7 +43,11 @@ var FilesMetadataBox = Polymer({
       observer: 'metadataUpdated_',
     },
     mediaTrack: {
-      type: Number,
+      type: String,
+      observer: 'metadataUpdated_',
+    },
+    mediaYearRecorded: {
+      type: String,
       observer: 'metadataUpdated_',
     },
     /**
@@ -80,7 +84,8 @@ var FilesMetadataBox = Polymer({
     this.mediaAlbum = '';
     this.mediaDuration = 0;
     this.mediaGenre = '';
-    this.mediaTrack = 0;
+    this.mediaTrack = '';
+    this.mediaYearRecorded = '';
     this.ifd = null;
 
     this.isSizeLoading = false;
@@ -118,7 +123,7 @@ var FilesMetadataBox = Polymer({
     this.hasFileSpecificInfo_ =
         !!(this.imageWidth && this.imageHeight || this.mediaTitle ||
            this.mediaArtist || this.mediaAlbum || this.mediaDuration ||
-           this.mediaGenre || this.mediaTrack ||
+           this.mediaGenre || this.mediaTrack || this.mediaYearRecorded ||
            this.ifd);
   },
 

ui/file_manager/file_manager/foreground/js/metadata/content_metadata_provider.js

@@ -65,6 +65,7 @@ ContentMetadataProvider.PROPERTY_NAMES = [
   'mediaMimeType',
   'mediaTitle',
   'mediaTrack',
+  'mediaYearRecorded',
 ];
 
 /**
@@ -162,7 +163,9 @@ ContentMetadataProvider.prototype.getFromMediaGalleries_ =
     entry.file(function(blob) {
       var metadataType = 'mimeTypeOnly';
       if (names.indexOf('mediaArtist') !== -1 ||
-          names.indexOf('mediaTitle') !== -1) {
+          names.indexOf('mediaTitle') !== -1 ||
+          names.indexOf('mediaTrack') !== -1 ||
+          names.indexOf('mediaYearRecorded') !== -1) {
         metadataType = 'mimeTypeAndTags';
       }
       if (names.indexOf('contentThumbnailUrl') !== -1) {
@@ -314,7 +317,23 @@ ContentMetadataProvider.prototype.convertMediaMetadataToMetadataItem_ =
     item.mediaDuration = metadata['duration'];
     item.mediaGenre = metadata['genre'];
     item.mediaTitle = metadata['title'];
-    item.mediaTrack = metadata['track'];
+    if (metadata['track']) {
+      item.mediaTrack = '' + metadata['track'];
+    }
+    if (metadata.rawTags) {
+      metadata.rawTags.forEach(function(entry) {
+        if (entry.type === 'mp3') {
+          if (entry.tags['date']) {
+            item.mediaYearRecorded = entry.tags['date'];
+          }
+          // It is possible that metadata['track'] is undefined but this is
+          // defined.
+          if (entry.tags['track']) {
+            item.mediaTrack = entry.tags['track'];
+          }
+        }
+      });
+    }
     if (metadata.attachedImages && metadata.attachedImages.length > 0) {
       var reader = new FileReader();
       reader.onload = function(e) {

ui/file_manager/file_manager/foreground/js/metadata/metadata_item.js

@@ -193,10 +193,15 @@ function MetadataItem() {
   this.mediaTitle;
 
   /**
-   * @public {number|undefined}
+   * @public {string|undefined}
    */
   this.mediaTrack;
 
+  /**
+   * @public {string|undefined}
+   */
+  this.mediaYearRecorded;
+
   /**
    * Mime type obtained by content provider based on URL.
    * TODO(hirono): Remove the mediaMimeType.

ui/file_manager/file_manager/foreground/js/metadata_box_controller.js

@@ -147,6 +147,7 @@ MetadataBoxController.prototype.onGeneralMetadataLoaded_ = function(
                 'mediaGenre',
                 'mediaTitle',
                 'mediaTrack',
+                'mediaYearRecorded',
               ])
           .then(function(items) {
             var item = items[0];
@@ -158,7 +159,8 @@ MetadataBoxController.prototype.onGeneralMetadataLoaded_ = function(
             this.metadataBox_.mediaDuration = item.mediaDuration || 0;
             this.metadataBox_.mediaGenre = item.mediaGenre || '';
             this.metadataBox_.mediaTitle = item.mediaTitle || '';
-            this.metadataBox_.mediaTrack = item.mediaTrack || 0;
+            this.metadataBox_.mediaTrack = item.mediaTrack || '';
+            this.metadataBox_.mediaYearRecorded = item.mediaYearRecorded || '';
           }.bind(this));
     }
   }