[dir view, repo wiki mode] show thumbnails for image files (#2805)

* [dir view, repo wiki mode] show thumbnails for image files

* modification for 'thumbnail' after api was updated

frontend/src/components/dir-view/dir-view.js

@@ -76,6 +76,7 @@ class DirView extends React.Component {
         currentRepoInfo: repoInfo,
         repoID: repoInfo.repo_id,
         repoName: repoInfo.repo_name,
+        encrypted: repoInfo.encrypted,
         permission: repoInfo.permission === 'rw',
         libNeedDecrypt: res.data.lib_need_decrypt,
       });
@@ -138,7 +139,7 @@ class DirView extends React.Component {
           {id: 'repo_updated', duration: 3600}
         );
       }
-    })
+    });
   }
 
   updateUsedRepoTags = (newUsedRepoTags) => {
@@ -156,10 +157,10 @@ class DirView extends React.Component {
     });
   }
 
-  updateDirentList = (filePath) => {
+  updateDirentList = (path) => {
     let repoID = this.state.repoID;
     this.setState({isDirentListLoading: true});
-    seafileAPI.listDir(repoID, filePath).then(res => {
+    seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
       let direntList = res.data.map(item => {
         let fileName = item.name.toLowerCase();
         if (fileName === 'readme.md' || fileName === 'readme.markdown') {
@@ -167,12 +168,17 @@ class DirView extends React.Component {
         }
         return new Dirent(item);
       });
+
       this.setState({
         isDirentListLoading: false,
         pathExist: true,
         direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
         dirID: res.headers.oid,
       });
+
+      if (!this.state.encrypted && direntList.length) {
+        this.getThumbnails(repoID, path, this.state.direntList);
+      }
     }).catch(() => {
       this.setState({
         isDirentListLoading: false,
@@ -181,6 +187,37 @@ class DirView extends React.Component {
     });
   }
 
+  getThumbnails = (repoID, path, direntList) => {
+    let items = direntList.filter((item) => {
+      return Utils.imageCheck(item.name) && !item.encoded_thumbnail_src;
+    });
+    if (items.length == 0) {
+      return ;
+    }
+
+    const _this = this;
+    const len = items.length;
+    const thumbnailSize = 48;
+    let getThumbnail = (i) => {
+      const curItem = items[i];
+      const curItemPath = [path, curItem.name].join('/');
+      seafileAPI.createThumbnail(repoID, curItemPath, thumbnailSize).then((res) => {
+        curItem.encoded_thumbnail_src = res.data.encoded_thumbnail_src;
+      }).catch((error) => {
+        // do nothing
+      }).then(() => {
+        if (i < len - 1) {
+          getThumbnail(++i);
+        } else {
+          _this.setState({
+            direntList: direntList
+          });
+        }
+      });
+    };
+    getThumbnail(0);
+  }
+
   onItemClick = (dirent) => {
     this.resetSelected();
     let direntPath = Utils.joinPath(this.state.path, dirent.name);
@@ -227,7 +264,7 @@ class DirView extends React.Component {
         this.setState({direntList: direntList});
       }).catch(() => {
         // todo
-      })
+      });
     } else {
       seafileAPI.deleteFile(repoID, direntPath).then(() => {
         let direntList = this.deleteItem(dirent);
@@ -235,7 +272,7 @@ class DirView extends React.Component {
         this.updateReadmeMarkdown(direntList);
       }).catch(() => {
         // todo
-      })
+      });
     }
   }
 
@@ -488,7 +525,7 @@ class DirView extends React.Component {
   }
 
   addItem = (dirent, type) => {
-    let direntList = this.state.direntList.map(item => {return item}); //clone
+    let direntList = this.state.direntList.map(item => {return item;}); //clone
     if (type === 'dir') {
       direntList.unshift(dirent);
       return direntList;
@@ -497,7 +534,7 @@ class DirView extends React.Component {
       // first: direntList.length === 0;
       // second: all the direntList's items are dir;
       // third: direntList has dir and file;
-      let length = direntList.length
+      let length = direntList.length;
       if (length === 0 || direntList[length - 1].type === 'dir') {
         direntList.push(dirent);
       } else {
@@ -530,7 +567,7 @@ class DirView extends React.Component {
   }
   
   deleteItems = (dirNames) => {
-    let direntList = this.state.direntList.map(item => {return item}); //clone
+    let direntList = this.state.direntList.map(item => {return item;}); //clone
     while (dirNames.length) {
       for (let i = 0; i < direntList.length; i++) {
         if (direntList[i].name === dirNames[0]) {
@@ -601,7 +638,7 @@ class DirView extends React.Component {
   onLibDecryptDialog = () => {
     this.setState({
       libNeedDecrypt: !this.state.libNeedDecrypt
-    })
+    });
     this.updateDirentList(this.state.path);
   }
 
@@ -610,7 +647,7 @@ class DirView extends React.Component {
       sortBy: sortBy,
       sortOrder: sortOrder,
       items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
-    })
+    });
   }
 
   render() {

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -433,7 +433,10 @@ class DirentListItem extends React.Component {
           </td>
           <td className="text-center">
             <div className="dir-icon">
+              {dirent.encoded_thumbnail_src ?
+                <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail" alt="" /> :
                 <img src={iconUrl} width="24" alt='' />
+              }
               {dirent.is_locked && <img className="locked" src={siteRoot + mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />}
             </div>
           </td>

frontend/src/models/dirent.js

@@ -28,6 +28,9 @@ class Dirent {
         });
       }
       this.file_tags = file_tags;
+      if (json.encoded_thumbnail_src) {
+        this.encoded_thumbnail_src = json.encoded_thumbnail_src;
+      }
     }
   }
 

frontend/src/repo-wiki-mode.js

@@ -83,6 +83,7 @@ class Wiki extends Component {
     seafileAPI.getRepoInfo(repoID).then(res => {
       this.setState({
         libNeedDecrypt: res.data.lib_need_decrypt, 
+        encrypted: res.data.encrypted
       });
 
     if (!res.data.lib_need_decrypt) {
@@ -323,9 +324,9 @@ class Wiki extends Component {
     });
   }
 
-  loadDirentList = (direntPath) => {
+  loadDirentList = (path) => {
     this.setState({isDirentListLoading: true});
-    seafileAPI.listDir(repoID, direntPath).then(res => {
+    seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
       let direntList = [];
       res.data.forEach(item => {
         let fileName = item.name.toLowerCase();
@@ -335,14 +336,49 @@ class Wiki extends Component {
         let dirent = new Dirent(item);
         direntList.push(dirent);
       });
+
       this.setState({
         direntList: Utils.sortDirents(direntList, this.state.sortBy, this.state.sortOrder),
         isDirentListLoading: false,
         dirID: res.headers.oid,
       });
+
+      if (!this.state.encrypted && direntList.length) {
+        this.getThumbnails(repoID, path, this.state.direntList);
+      }
     });
   }
 
+  getThumbnails = (repoID, path, direntList) => {
+    let items = direntList.filter((item) => {
+      return Utils.imageCheck(item.name) && !item.encoded_thumbnail_src;
+    });
+    if (items.length == 0) {
+      return ;
+    }
+
+    const _this = this;
+    const len = items.length;
+    const thumbnailSize = 48;
+    let getThumbnail = (i) => {
+      const curItem = items[i];
+      const curItemPath = [path, curItem.name].join('/');
+      seafileAPI.createThumbnail(repoID, curItemPath, thumbnailSize).then((res) => {
+        curItem.encoded_thumbnail_src = res.data.encoded_thumbnail_src;
+      }).catch((error) => {
+        // do nothing
+      }).then(() => {
+        if (i < len - 1) {
+          getThumbnail(++i);
+        } else {
+          _this.setState({
+            direntList: direntList 
+          });
+        }
+      });
+    };
+    getThumbnail(0);
+  }
 
   onLinkClick = (event) => {
     const url = event.path[2].href;

media/css/seahub_react.css

@@ -1032,3 +1032,10 @@ a.table-sort-op:focus {
   text-align: center;
   z-index: 4;
 }
+
+/* thumbnail */
+.thumbnail {
+    max-width: 24px;
+    max-height: 24px;
+}
+