Files.app: Show thumbnail of non-image file even when the file cache is present

Previously, thumbnails of offline-available non-image files were not shown. This was because we tried to show self-generated thumbnails when the file cache was present. But we can't generate thumbnails of non-image so the thumbnails of video files were not shown.

With this patch, if thumbnail can't be generated, the thumbnail from the external provider shows instead.

BUG=415048
TEST=manual tested

Review URL: https://codereview.chromium.org/574293002

Cr-Commit-Position: refs/heads/master@{#295893}

chrome/browser/chromeos/extensions/file_manager/private_api_drive.cc

@@ -76,10 +76,7 @@ void FillEntryPropertiesValueForDrive(const drive::ResourceEntry& entry_proto,
   const drive::FileSpecificInfo& file_specific_info =
       entry_proto.file_specific_info();
 
-  // The web thumbnail is used only when the file is not present. Otherwise
-  // it could be out of sync.
-  if (!entry_proto.resource_id().empty() &&
-      !file_specific_info.cache_state().is_present()) {
+  if (!entry_proto.resource_id().empty()) {
     properties->thumbnail_url.reset(
         new std::string("https://www.googledrive.com/thumb/" +
                         entry_proto.resource_id() + "?width=500&height=500"));

ui/file_manager/file_manager/foreground/js/metadata/metadata_cache.js

@@ -874,7 +874,8 @@ ExternalProvider.prototype.convert_ = function(data, entry) {
     customIconUrl: data.customIconUrl || '',
     contentMimeType: data.contentMimeType || '',
     sharedWithMe: data.sharedWithMe,
-    shared: data.shared
+    shared: data.shared,
+    thumbnailUrl: data.thumbnailUrl  // Thumbnail passed from external server.
   };
 
   result.filesystem = {
@@ -882,13 +883,15 @@ ExternalProvider.prototype.convert_ = function(data, entry) {
     modificationTime: new Date(data.lastModifiedTime)
   };
 
-  if ('thumbnailUrl' in data) {
+  if (data.isPresent) {
+    // If the file is present, don't fill the thumbnail here and allow to
+    // generate it by next providers.
+    result.thumbnail = null;
+  } else if ('thumbnailUrl' in data) {
     result.thumbnail = {
       url: data.thumbnailUrl,
       transform: null
     };
-  } else if (data.isPresent) {
-    result.thumbnail = null;
   } else {
     // Not present in cache, so do not allow to generate it by next providers.
     result.thumbnail = {url: '', transform: null};

ui/file_manager/file_manager/foreground/js/thumbnail_loader.js

@@ -50,11 +50,17 @@ function ThumbnailLoader(entry, opt_loaderType, opt_metadata, opt_mediaType,
     };
   }
 
-  if (opt_metadata.thumbnail && opt_metadata.thumbnail.url &&
+  if (((opt_metadata.thumbnail && opt_metadata.thumbnail.url) ||
+       (opt_metadata.external && opt_metadata.external.thumbnailUrl)) &&
       opt_useEmbedded === ThumbnailLoader.UseEmbedded.USE_EMBEDDED) {
-    this.thumbnailUrl_ = opt_metadata.thumbnail.url;
+    // If the thumbnail generated from the local cache (metadata.thumbnail.url)
+    // is available, use it. If not, use the one passed from the external
+    // provider (metadata.external.thumbnailUrl).
+    this.thumbnailUrl_ =
+        (opt_metadata.thumbnail && opt_metadata.thumbnail.url) ||
+        (opt_metadata.external && opt_metadata.external.thumbnailUrl);
     this.transform_ = externalTransform !== undefined ? externalTransform :
-        opt_metadata.thumbnail.transform;
+        (opt_metadata.thumbnail && opt_metadata.thumbnail.transform);
   } else if (FileType.isImage(entry)) {
     this.thumbnailUrl_ = entry.toURL();
     this.transform_ = externalTransform !== undefined ? externalTransform :

ui/file_manager/video_player/js/video_player.js

@@ -315,8 +315,12 @@ VideoPlayer.prototype.loadVideo_ = function(video, opt_callback) {
         .then(function(results) {
           var url = results[0];
           var token = results[1];
-          document.querySelector('#thumbnail').style.backgroundImage =
-              'url(' + url + '&access_token=' + token + ')';
+          if (url && token) {
+            document.querySelector('#thumbnail').style.backgroundImage =
+                'url(' + url + '&access_token=' + token + ')';
+          } else {
+            document.querySelector('#thumbnail').style.backgroundImage = '';
+          }
         })
         .catch(function() {
           // Shows no image on error.