Merge branch '7.0'

frontend/src/app.js

@@ -270,7 +270,7 @@ class App extends Component {
               <InvitationsView path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             </Router>
           </MainPanel>
-          <MediaQuery query="(max-width: 768px)">
+          <MediaQuery query="(max-width: 767.8px)">
             <Modal isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
           </MediaQuery>
         </div>

frontend/src/components/cur-dir-path/dir-tool.js

@@ -87,14 +87,7 @@ class DirTool extends React.Component {
     let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
     let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
     if (permission) {
-      if (isFile) { // isFile
-        historyUrl = siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + Utils.encodePath(currentPath);
-        return (
-          <ul className="path-toolbar">
-            <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
-          </ul>
-        );
-      } else {
+      if (!isFile) {
         if (name) { // name not '' is not root path
           trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
           return (

frontend/src/components/file-chooser/file-chooser.js

@@ -110,9 +110,9 @@ class FileChooser extends React.Component {
     }
   }
 
-  onCurrentRepoToggle = () => [
-    this.setState({isCurrentRepoShow: !this.state.isCurrentRepoShow})
-  ]
+  onCurrentRepoToggle = () => {
+    this.setState({isCurrentRepoShow: !this.state.isCurrentRepoShow});
+  }
 
   onDirentItemClick = (repo, filePath, dirent) => {
     this.props.onDirentItemClick(repo, filePath, dirent);
@@ -310,7 +310,7 @@ class FileChooser extends React.Component {
       selectedItemInfo: selectedItemInfo
     });
 
-    if (item.repo_id === this.props.repoID) {
+    if (this.props.repoID && item.repo_id === this.props.repoID) {
       seafileAPI.getRepoInfo(this.props.repoID).then(res => {
         // need to optimized
         let repoInfo = new RepoInfo(res.data);

frontend/src/components/file-chooser/tree-list-item.js

@@ -36,7 +36,11 @@ class TreeViewItem extends React.Component {
 
   onItemClick = (e) => {
     e.stopPropagation();  // need prevent event popup
-    let isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
+    let isCurrentRepo = false;
+    if (this.props.selectedRepo) {
+      isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
+    }
+    
     if (isCurrentRepo) {
       if (this.props.selectedPath !== this.state.filePath) {
         this.props.onDirentItemClick(this.state.filePath, this.props.node.object);
@@ -77,7 +81,10 @@ class TreeViewItem extends React.Component {
 
   render() {
     let { node } = this.props;
-    let isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
+    let isCurrentRepo = false;
+    if (this.props.selectedRepo) {
+      isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
+    }
     let isCurrentPath = this.props.selectedPath === this.state.filePath;
 
     const fileName = node.object.name;

frontend/src/components/file-content-view/image.js

@@ -5,8 +5,11 @@ import { gettext, siteRoot } from '../../utils/constants';
 import '../../css/image-file-view.css';
 
 const {
-  repoID,
-  fileName, previousImage, nextImage, rawPath
+  repoID, repoEncrypted,
+  fileExt, filePath, fileName,
+  thumbnailSizeForOriginal,
+  previousImage, nextImage, rawPath,
+  xmindImageSrc // for xmind file
 } = window.app.pageOptions;
 
 let previousImageUrl, nextImageUrl; 
@@ -19,6 +22,13 @@ if (nextImage) {
 
 class FileContent extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      loadFailed: false
+    };
+  }
+
   componentDidMount() {
     document.addEventListener('keydown', (e) => {
       if (previousImage && e.keyCode == 37) { // press '<-'
@@ -30,7 +40,28 @@ class FileContent extends React.Component {
     });
   }
 
+  handleLoadFailure = () => {
+    this.setState({
+      loadFailed: true
+    });
+  }
+
   render() {
+    if (this.state.loadFailed) {
+      return this.props.tip;
+    }
+
+    // request thumbnails for some files
+    // only for 'file view'. not for 'history/trash file view'
+    let thumbnailURL = '';
+    const fileExtList = ['tif', 'tiff', 'psd'];
+    if (this.props.canUseThumbnail && !repoEncrypted && fileExtList.includes(fileExt)) {
+      thumbnailURL = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${Utils.encodePath(filePath)}`;
+    }
+
+    // for xmind file
+    const xmindSrc = xmindImageSrc ? `${siteRoot}${xmindImageSrc}` : '';
+
     return (
       <div className="file-view-content flex-1 image-file-view">
         {previousImage && (
@@ -39,7 +70,7 @@ class FileContent extends React.Component {
         {nextImage && (
           <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
         )}
-        <img src={rawPath} alt={fileName} id="image-view" />
+        <img src={xmindSrc || thumbnailURL || rawPath} alt={fileName} id="image-view" onError={this.handleLoadFailure} />
       </div>
     );
   }

frontend/src/components/search/search.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
 import More from '../more';
@@ -276,7 +276,7 @@ class Search extends Component {
                   onChange={this.onChangeHandler}
                   autoComplete="off"
                 />
-                {this.state.isCloseShow &&
+                {(this.state.isCloseShow && username) &&
                   <i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
                     onClick={this.onSearchPage}></i>
                 }
@@ -288,7 +288,7 @@ class Search extends Component {
             </div>
           </div>
         </MediaQuery>
-        <MediaQuery query="(max-width: 768px)">
+        <MediaQuery query="(max-width: 767.8px)">
           <div className="search-icon-container">
             <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
           </div>
@@ -309,7 +309,7 @@ class Search extends Component {
                     onChange={this.onChangeHandler}
                     autoComplete="off"
                   />
-                  {this.state.isCloseShow &&
+                  {(this.state.isCloseShow && username) &&
                     <i className='search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow'
                       onClick={this.onSearchPage}></i>
                   }

frontend/src/components/toolbar/invitations-toolbar.js

@@ -31,7 +31,7 @@ class InvitationsToolbar extends React.Component {
               </Button>
             </div>
           </MediaQuery>
-          <MediaQuery query="(max-width: 768px)">
+          <MediaQuery query="(max-width: 767.8px)">
             <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')}></span>
           </MediaQuery>
         </div>

frontend/src/components/toolbar/repo-view-toobar.js

@@ -61,7 +61,7 @@ class RepoViewToolbar extends React.Component {
               )}
             </div>
           </MediaQuery>
-          <MediaQuery query="(max-width: 768px)">
+          <MediaQuery query="(max-width: 767.8px)">
             <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
           </MediaQuery>
         </div>

frontend/src/components/toolbar/view-file-toolbar.js

@@ -85,6 +85,11 @@ class ViewFileToolbar extends React.Component {
     });
   }
 
+  onHistoryClick = () => {
+    let historyUrl = siteRoot + 'repo/file_revisions/' + this.props.repoID + '/?p=' + Utils.encodePath(this.props.path);
+    location.href = historyUrl;
+  }
+
   render() {
     let { filePermission } = this.props;
     let name = Utils.getFileName(this.props.path);
@@ -114,6 +119,7 @@ class ViewFileToolbar extends React.Component {
                 }
                 <DropdownItem onClick={this.onEditFileTagToggle}>{gettext('Tags')}</DropdownItem>
                 <DropdownItem onClick={this.onListRelatedFileToggle}>{gettext('Related Files')}</DropdownItem>
+                <DropdownItem onClick={this.onHistoryClick}>{gettext('History')}</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           )}

frontend/src/components/wiki-list-view/wiki-list-view.js

@@ -43,7 +43,7 @@ class WikiListView extends Component {
                 <th width="4%"></th>
                 <th width="36%">{gettext('Name')}</th>
               </MediaQuery>
-              <MediaQuery query="(max-width: 768px)">
+              <MediaQuery query="(max-width: 767.8px)">
                 <th width="10%"></th>
                 <th width="30%">{gettext('Name')}</th>
               </MediaQuery>

frontend/src/css/search.css

@@ -84,8 +84,8 @@
 }
 .search-result-item .item-content {
   flex: 1;
-  width: 0;
   margin-left: 0.25rem;
+  overflow-x: hidden;
 }
 .item-content .item-name a {
   color: #EA8102 !important;

frontend/src/file-view.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FileView from './components/file-view/file-view';
+import FileViewTip from './components/file-view/file-view-tip';
+import Image from './components/file-content-view/image';
+import SVG from './components/file-content-view/svg';
+import PDF from './components/file-content-view/pdf';
+import Video from './components/file-content-view/video';
+import Audio from './components/file-content-view/audio';
+
+const {
+  fileType, err
+} = window.app.pageOptions;
+
+class InnerFileView extends React.Component {
+
+  render() {
+    if (err) {
+      return (
+        <FileView content={<FileViewTip />} />
+      );
+    }
+
+    let content;
+    switch (fileType) {
+      case 'Image':
+        content = <Image tip={<FileViewTip />} canUseThumbnail={true} />;
+        break;
+      case 'XMind':
+        content = <Image tip={<FileViewTip />} />;
+        break;
+      case 'SVG': 
+        content = <SVG />;
+        break;
+      case 'PDF': 
+        content = <PDF />;
+        break;
+      case 'Video': 
+        content = <Video />;
+        break;
+      case 'Audio': 
+        content = <Audio />;
+        break;
+    }
+
+    return (
+      <FileView content={content} />
+    );
+  }
+}
+
+ReactDOM.render (
+  <InnerFileView />,
+  document.getElementById('wrapper')
+);

frontend/src/history-trash-file-view.js

@@ -26,7 +26,7 @@ class HistoryTrashFileView extends React.Component {
     let content;
     switch (fileType) {
       case 'Image':
-        content = <Image />;
+        content = <Image tip={<FileViewTip />} />;
         break;
       case 'SVG': 
         content = <SVG />;

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -301,7 +301,7 @@ class MylibRepoListItem extends React.Component {
         <MediaQuery query="(min-width: 768px)">
           {this.renderPCUI()}
         </MediaQuery>
-        <MediaQuery query="(max-width: 768px)">
+        <MediaQuery query="(max-width: 767.8px)">
           {this.renderMobileUI()}
         </MediaQuery>
         {this.state.isShareDialogShow && (

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -126,7 +126,7 @@ class MylibRepoListView extends React.Component {
         <MediaQuery query="(min-width: 768px)">
           {this.renderPCUI()}
         </MediaQuery>
-        <MediaQuery query="(max-width: 768px)">
+        <MediaQuery query="(max-width: 767.8px)">
           {this.renderMobileUI()}
         </MediaQuery>
       </Fragment>

frontend/src/pages/search/advanced-search.js

@@ -225,7 +225,7 @@ class AdvancedSearch extends React.Component {
                 </Col>
               </Row>
             </div>
-            <MediaQuery query="(max-width: 768px)">
+            <MediaQuery query="(max-width: 767.8px)">
               {errorSizeMsg && <div className="error mb-4">{errorSizeMsg}</div>}
               <Button color="primary" onClick={this.props.handleSubmit}>{gettext('Submit')}</Button>
               <Button className="ml-2" onClick={this.props.handleReset}>{gettext('Reset')}</Button>

frontend/src/view-file-audio.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import AudioPlayer from './components/audio-player';
-
-import './css/audio-file-view.css';
-
-const {
-  err, rawPath
-} = window.app.pageOptions;
-
-class ViewFileAudio extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    const videoJsOptions = {
-      autoplay: false,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: rawPath
-      }]
-    };
-    return (
-      <div className="file-view-content flex-1 audio-file-view">
-        <AudioPlayer { ...videoJsOptions } />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileAudio />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-image.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Utils } from './utils/utils';
-import { gettext, siteRoot } from './utils/constants';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/image-file-view.css';
-
-const {
-  repoID, filePath, err,
-  fileName, previousImage, nextImage, rawPath, thumbnailSizeForOriginal,
-} = window.app.pageOptions;
-
-let previousImageUrl, nextImageUrl; 
-if (previousImage) {
-  previousImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(previousImage)}`;
-}
-if (nextImage) {
-  nextImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(nextImage)}`;
-}
-
-class ViewFileImage extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      thumbnailError: false,
-    };
-    this.thumbnailSuffixList = ['tiff', 'eps', 'psd'];
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', (e) => {
-      if (previousImage && e.keyCode == 37) { // press '<-'
-        location.href = previousImageUrl;
-      }
-      if (nextImage && e.keyCode == 39) { // press '->'
-        location.href = nextImageUrl;
-      }
-    });
-  }
-
-  handleError = () => {
-    this.setState({
-      thumbnailError: true
-    });
-  };
-
-  render() {
-    if (err || this.state.thumbnailError) {
-      return <FileViewTip />;
-    }
-    let thumbnailUrl = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${Utils.encodePath(filePath)}`;
-    let imageSuffix = fileName.split('.').pop();
-    let isPreviewThumbnail = this.thumbnailSuffixList.includes(imageSuffix);
-
-    return (
-      <div className="file-view-content flex-1 image-file-view">
-        {previousImage && (
-          <a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
-        )}
-        {nextImage && (
-          <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
-        )}
-        {isPreviewThumbnail ?
-          <img src={thumbnailUrl} alt={fileName} id="image-view" onError={this.handleError}/> :
-          <img src={rawPath} alt={fileName} id="image-view"/>
-        }
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileImage />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-pdf.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import PDFViewer from './components/pdf-viewer';
-
-import './css/pdf-file-view.css';
-
-const { err } = window.app.pageOptions;
-
-class ViewFilePDF extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    return (
-      <div className="file-view-content flex-1 pdf-file-view">
-        <PDFViewer />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFilePDF />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-svg.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/svg-file-view.css';
-
-const {
-  err, fileName, rawPath
-} = window.app.pageOptions;
-
-class ViewFileSVG extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-    return (
-      <div className="file-view-content flex-1 svg-file-view">
-        <img src={rawPath} alt={fileName} id="svg-view" />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileSVG />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-unknown.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-const { err } = window.app.pageOptions;
-
-class ViewFileUnknown extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-  }
-}
-
-ReactDOM.render (
-  <ViewFileUnknown />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-video.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-import VideoPlayer from './components/video-player';
-
-import './css/video-file-view.css';
-
-const {
-  err, rawPath
-} = window.app.pageOptions;
-
-class ViewFileVideo extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-
-    const videoJsOptions = {
-      autoplay: false,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: rawPath
-      }]
-    };
-    return (
-      <div className="file-view-content flex-1 video-file-view">
-        <VideoPlayer { ...videoJsOptions } />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileVideo />,
-  document.getElementById('wrapper')
-);

frontend/src/view-file-xmind.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { siteRoot } from './utils/constants';
-import FileView from './components/file-view/file-view';
-import FileViewTip from './components/file-view/file-view-tip';
-
-import './css/image-file-view.css';
-
-const { err, fileName, xmindImageSrc } = window.app.pageOptions;
-
-class ViewFileXmind extends React.Component {
-  render() {
-    return (
-      <FileView content={<FileContent />} />
-    );
-  }
-}
-
-class FileContent extends React.Component {
-  render() {
-    if (err) {
-      return <FileViewTip />;
-    }
-    return (
-      <div className="file-view-content flex-1 image-file-view">
-        <img src={`${siteRoot}${xmindImageSrc}`} alt={fileName} id="image-view" />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render (
-  <ViewFileXmind />,
-  document.getElementById('wrapper')
-);

frontend/src/wiki.js

@@ -460,7 +460,7 @@ class Wiki extends Component {
           onMainNavBarClick={this.onMainNavBarClick}
           onDirentClick={this.onDirentClick}
         />
-        <MediaQuery query="(max-width: 768px)">
+        <MediaQuery query="(max-width: 767.8px)">
           <Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
         </MediaQuery>
       </div>