improve performance fetching files items

By stop checking for thumbnail file exitence to verify whether the file has thumbnail.
directus · Apr 7, 2017 · 3c86ed5 · 3c86ed5
1 parent 1174eaa
commit 3c86ed5
Show file tree

Hide file tree

Showing 8 changed files with 424 additions and 377 deletions.
diff --git a/api/core/Directus/Bootstrap.php b/api/core/Directus/Bootstrap.php
@@ -673,13 +673,8 @@ private static function hookEmitter()
 
                     // 314551321-vimeo-220-124-true.jpg
                     // hotfix: there's not thumbnail for this file
-                    if ($files->exists('thumbs/' . $oldThumbnailFilename)) {
-                        $row['thumbnail_url'] = $thumbnailURL . '/' . $oldThumbnailFilename;
-                    }
-
-                    if ($files->exists('thumbs/' . $thumbnailFilename)) {
-                        $row['thumbnail_url'] = $thumbnailURL . '/' . $thumbnailFilename;
-                    }
+                    $row['old_thumbnail_url'] = $thumbnailURL . '/' . $oldThumbnailFilename;
+                    $row['thumbnail_url'] = $thumbnailURL . '/' . $thumbnailFilename;
 
                     $embedManager = Bootstrap::get('embedManager');
                     $provider = $embedManager->getByType($row['type']);

diff --git a/app/core/uis/directus_file.js b/app/core/uis/directus_file.js
@@ -7,7 +7,7 @@
 //  http://www.getdirectus.com
 /*jshint multistr: true */
 
-define(['app', 'core/UIComponent', 'core/UIView'], function(app, UIComponent, UIView) {
+define(['app', 'helpers/file', 'core/UIComponent', 'core/UIView'], function(app, FileHelper, UIComponent, UIView) {
 
   'use strict';
 
@@ -87,7 +87,7 @@ define(['app', 'core/UIComponent', 'core/UIView'], function(app, UIComponent, UI
                       {{{html}}} \
                     {{else}} \
                       {{#if thumbUrl}} \
-                         <a target="_BLANK" href="{{url}}"><img src="{{thumbUrl}}"></a> \
+                        <div class="default-info js-image"><a target="_BLANK" href="{{url}}"><div class="type">{{uppercase type}}</div><img src="{{thumbUrl}}"></a></div> \
                       {{else}} \
                         <div class="default-info"><a target="_BLANK" href="{{url}}">{{type}}</a></div> \
                       {{/if}} \
@@ -220,7 +220,6 @@ define(['app', 'core/UIComponent', 'core/UIView'], function(app, UIComponent, UI
       var timer;
       var $dropzone = this.$el.find('.ui-thumbnail');
       var model = this.model;
-      var self = this;
 
       $dropzone.on('dragover', function(e) {
         clearInterval(timer);
@@ -255,6 +254,8 @@ define(['app', 'core/UIComponent', 'core/UIView'], function(app, UIComponent, UI
         $dropzone.removeClass('dragover');
       };
 
+      // Show fallback image if file missing
+      FileHelper.hideOnImageError(this.$('.js-image img'));
     },
   });
 

diff --git a/app/core/uis/single_file.js b/app/core/uis/single_file.js
@@ -22,12 +22,13 @@ define([
     'backbone',
     'core/t',
     'utils',
+    'helpers/file',
     'core/UIComponent',
     'core/UIView',
     'core/table/table.view',
     'core/overlays/overlays'
   ],
-  function(app, _, Backbone, __t, Utils, UIComponent, UIView, TableView, Overlays) {
+  function(app, _, Backbone, __t, Utils, FileHelper, UIComponent, UIView, TableView, Overlays) {
 
   'use strict';
 
@@ -138,7 +139,7 @@ define([
                       {{#if html}}\
                         {{{html}}}\
                       {{else}} \
-                        <a href="#" class="title"><img src="{{thumbUrl}}"></a> \
+                        <div class="default-info js-image"><a href="#" class="title"><img src="{{thumbUrl}}"></div></div></a> \
                       {{/if}} \
                     </div> \
                     <div class="ui-img-details single_file"> \
@@ -271,7 +272,6 @@ define([
       var timer;
       var $dropzone = this.$el.find('.single-image-thumbnail');
       var model = this.fileModel;
-      var self = this;
 
       $dropzone.on('dragover', function(e) {
         clearInterval(timer);
@@ -304,6 +304,10 @@ define([
         $dropzone.removeClass('dragover');
       }, this);
 
+      // Show fallback image if file missing
+      FileHelper.onImageError(this.$('.js-image img'), function (event, element) {
+        $(element).attr('src', app.PATH + 'assets/img/document.png');
+      });
     },
 
     serialize: function() {

diff --git a/app/helpers/file.js b/app/helpers/file.js
@@ -1,4 +1,4 @@
-define(function() {
+define(['jquery'], function ($) {
 
   'use strict';
 
@@ -171,5 +171,17 @@ define(function() {
     return ['B','KB','MB','GB','TB','PB','EB','ZB','YB'][index];
   }
 
+  FileHelper.onImageError = function (elements, fn) {
+    $(elements).one('error', function (event) {
+      fn.apply(event.target, [event, event.target]);
+    });
+  };
+
+  FileHelper.hideOnImageError = function (elements) {
+    this.onImageError(elements, function () {
+      $(this).hide();
+    });
+  };
+
   return FileHelper;
 });
diff --git a/app/modules/files/FilesModel.js b/app/modules/files/FilesModel.js
@@ -36,7 +36,7 @@ function(app, _, Backbone, EntriesModel, Notification, __t, Utils, File) {
 
       // TODO: avoid omitting url and html at some point
       // rewrite this so we omit these values when we really want it to be omitted.
-      return _.omit(atts, 'thumbnailData', 'url', 'file_url', 'file_thumb_url', 'thumbnail_url', 'html');
+      return _.omit(atts, 'thumbnailData', 'url', 'file_url', 'file_thumb_url', 'old_thumbnail_url', 'thumbnail_url', 'html');
     },
 
     formatTitle: function(name) {

diff --git a/app/modules/files/views/FilesCardView.js b/app/modules/files/views/FilesCardView.js
@@ -2,10 +2,9 @@ define([
   'app',
   'backbone',
   'core/widgets/widgets',
+  'helpers/file',
   'moment'
-],
-
-function(app, Backbone, Widgets, moment) {
+], function(app, Backbone, Widgets, FileHelper, moment) {
 
   var FilesCardView = Backbone.Layout.extend({
 
@@ -51,7 +50,7 @@ function(app, Backbone, Widgets, moment) {
         if (!data.id) {
           data.thumbnail = '<div class="default-loading"><span class="icon icon-three-dots"></span></div>';
         } else if ((type == 'image' || type === 'embed' || subtype === 'pdf') && model.makeFileUrl(true)) {
-          data.thumbnail = '<img src="'+model.makeFileUrl(true)+'">';
+          data.thumbnail = '<div class="default-info js-image"><div class="type">' +data.type.toUpperCase()+'</div><img src="'+model.makeFileUrl(true)+'"></div>';
         } else {
           data.thumbnail = '<div class="default-info">' +data.type.toUpperCase()+'</div>';
         }
@@ -76,10 +75,7 @@ function(app, Backbone, Widgets, moment) {
 
     afterRender: function() {
       // Show fallback image if file missing
-      $('.header-image > img', this.$el).error(function() {
-        $(this).off('error');
-        $(this).attr('src', app.root + 'assets/img/missing-image-placeholder.jpg');
-      });
+      FileHelper.hideOnImageError(this.$('.js-image img'));
     },
 
     initialize: function(options) {