[favorites] show thumbnail for image files

seahub/templates/js/templates.html

@@ -1165,7 +1165,13 @@
     </tr>
 </script>
 <script type="text/template" id="starred-file-item-tmpl">
-    <td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
+    <td class="alc">
+        <% if (encoded_thumbnail_src) { %>
+            <img class="thumbnail" src="{{ SITE_ROOT }}<%= encoded_thumbnail_src %>" alt="" />
+        <% } else { %>
+            <img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" />
+        <% } %>
+    </td>
     <td>
         <% if (is_img) { %>
             <a class="img-name-link" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>
@@ -1180,7 +1186,13 @@
     </td>
 </script>
 <script type="text/template" id="starred-file-item-mobile-tmpl">
-    <td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
+    <td class="alc">
+        <% if (encoded_thumbnail_src) { %>
+            <img class="thumbnail" src="{{ SITE_ROOT }}<%= encoded_thumbnail_src %>" alt="" />
+        <% } else { %>
+            <img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" />
+        <% } %>
+    </td>
     <td>
         <% if (is_img) { %>
             <a class="img-name-link" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>

static/scripts/app/views/starred-file-item.js

@@ -19,6 +19,8 @@ define([
 
         initialize: function() {
             HLItemView.prototype.initialize.call(this);
+
+            this.listenTo(this.model, "change", this.render);
         },
 
         render: function () {
@@ -26,6 +28,7 @@ define([
 
             data['is_img'] = Common.imageCheck(data['file_name']);
             data['encoded_path'] = Common.encodePath(data['path']);
+            data.encoded_thumbnail_src = this.model.get('encoded_thumbnail_src') || '';
 
             var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
             this.$el.html(tmpl(data));

static/scripts/app/views/starred-file.js

@@ -35,12 +35,57 @@ define([
                 this.renderThead();
                 this.starredFiles.each(this.addOne, this);
                 this.$table.show();
+                this.getImageThumbnail();
             } else {
                 this.$emptyTip.show();
                 this.$table.hide();
             }
         },
 
+        getImageThumbnail: function() {
+            if (!app.pageOptions.enable_thumbnail) {
+                return false;
+            }
+
+            var images = this.starredFiles.filter(function(item) {
+                // 'item' is a model
+                return Common.imageCheck(item.get('file_name'));
+            });
+            if (images.length == 0) {
+                return ;
+            }
+
+            var images_len = images.length;
+            var thumbnail_size = app.pageOptions.thumbnail_default_size;
+
+            var get_thumbnail = function(i) {
+                var cur_img = images[i];
+                $.ajax({
+                    url: Common.getUrl({
+                        name: 'thumbnail_create',
+                        repo_id: cur_img.get('repo_id')
+                    }),
+                    data: {
+                        'path': cur_img.get('path'),
+                        'size': thumbnail_size
+                    },
+                    cache: false,
+                    dataType: 'json',
+                    success: function(data) {
+                        cur_img.set({
+                            'encoded_thumbnail_src': data.encoded_thumbnail_src
+                        });
+                    },
+                    complete: function() {
+                        if (i < images_len - 1) {
+                            get_thumbnail(++i);
+                        }
+                    }
+                });
+            };
+            get_thumbnail(0);
+        },
+
         showStarredFiles: function() {
             this.$table.hide();
             this.$loadingTip.show();