File view details panel (#6938)

* [PDF file view] replaced the current 'details' panel with a new one(which can display meta data details)

* ['file view' with 'third party editor'] fixup for the 'title' of the page

* ['file view'] replaced the 'details' panel with a new one(which can display meta data details) for the other types of files

- file types: IMAGE VIDEO AUDIO SVG XMIND TEXT DOCUMENT(HAS_OFFICE_CONVERTER) SPREADSHEET(HAS_OFFICE_CONVERTER)

frontend/src/components/dirent-detail/old-file-details.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { siteRoot, gettext, enableVideoThumbnail } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
-import toaster from '../toast';
-import Header from './detail/header';
-
-import '../../css/dirent-detail.css';
-
-dayjs.extend(relativeTime);
-
-const propTypes = {
-  repoID: PropTypes.string.isRequired,
-  repoName: PropTypes.string.isRequired,
-  dirent: PropTypes.object.isRequired,
-  path: PropTypes.string.isRequired,
-  togglePanel: PropTypes.func.isRequired
-};
-
-class FileDetails extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      direntDetail: '',
-    };
-  }
-
-  componentDidMount() {
-    let { dirent, path, repoID } = this.props;
-    let direntPath = Utils.joinPath(path, dirent.name);
-    seafileAPI.getFileInfo(repoID, direntPath).then(res => {
-      this.setState({
-        direntDetail: res.data
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  renderDetailBody = (bigIconUrl) => {
-    const { direntDetail } = this.state;
-    const { repoName, path } = this.props;
-    return (
-      <div className="detail-body dirent-info">
-        <div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
-        {this.state.direntDetail &&
-        <div className="dirent-table-container">
-          <table className="table-thead-hidden">
-            <thead>
-              <tr>
-                <th width="35%"></th>
-                <th width="65%"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
-              <tr><th>{gettext('Location')}</th><td>{repoName + path}</td></tr>
-              <tr><th>{gettext('Last Update')}</th><td>{dayjs(direntDetail.last_modified).fromNow()}</td></tr>
-            </tbody>
-          </table>
-        </div>
-        }
-      </div>
-    );
-  };
-
-  render() {
-    let { dirent, repoID, path } = this.props;
-
-    const smallIconUrl = Utils.getFileIconUrl(dirent.name);
-    let bigIconUrl = Utils.getFileIconUrl(dirent.name);
-    const isImg = Utils.imageCheck(dirent.name);
-    const isVideo = Utils.videoCheck(dirent.name);
-    if (isImg || (enableVideoThumbnail && isVideo)) {
-      bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
-    }
-    return (
-      <div className="detail-container file-details-container">
-        <Header title={dirent.name} icon={smallIconUrl} onClose={this.props.togglePanel} />
-        {this.renderDetailBody(bigIconUrl)}
-      </div>
-    );
-  }
-}
-
-FileDetails.propTypes = propTypes;
-
-export default FileDetails;

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

@@ -9,7 +9,6 @@ import IconButton from '../icon-button';
 import FileInfo from './file-info';
 import FileToolbar from './file-toolbar';
 import OnlyofficeFileToolbar from './onlyoffice-file-toolbar';
-import FileDetails from '../dirent-detail/old-file-details';
 import EmbeddedFileDetails from '../dirent-detail/embedded-file-details';
 import { CollaboratorsProvider, EnableMetadataProvider } from '../../metadata';
 
@@ -22,12 +21,12 @@ const propTypes = {
   needSave: PropTypes.bool,
   isOnlyofficeFile: PropTypes.bool,
   participants: PropTypes.array,
-  onParticipantsChange: PropTypes.func,
+  onParticipantsChange: PropTypes.func
 };
 
 const { isStarred, isLocked, lockedByMe,
   repoID, filePath, filePerm, enableWatermark, userNickName,
-  repoName, parentDir, fileName
+  fileName
 } = window.app.pageOptions;
 
 class FileView extends React.Component {
@@ -146,8 +145,6 @@ class FileView extends React.Component {
           }
           {this.props.content}
           {isDetailsPanelOpen && (
-            <>
-              {isOnlyofficeFile ?
             <EnableMetadataProvider repoID={repoID} >
               <CollaboratorsProvider repoID={repoID}>
                 <EmbeddedFileDetails
@@ -159,16 +156,6 @@ class FileView extends React.Component {
                 />
               </CollaboratorsProvider>
             </EnableMetadataProvider>
-                :
-                <FileDetails
-                  repoID={repoID}
-                  repoName={repoName}
-                  path={parentDir}
-                  dirent={{ 'name': fileName, type: 'file' }}
-                  togglePanel={this.toggleDetailsPanel}
-                />
-              }
-            </>
           )}
         </div>
       </div>

seahub/templates/view_file_thirdparty_editor.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>iframe lian test</title>
+<title>{{ filename }}</title>
 <style>
 html, body {
     margin:0;

seahub/views/file.py

@@ -545,6 +545,7 @@ def view_lib_file(request, repo_id, path):
                       THIRDPARTY_EDITOR_ACCESS_TOKEN_EXPIRATION)
 
             editor_dict = {}
+            editor_dict['filename'] = filename
             editor_dict['action_url'] = action_url
             editor_dict['access_token'] = access_token
             editor_dict['access_token_ttl'] = int(time.time()) + THIRDPARTY_EDITOR_ACCESS_TOKEN_EXPIRATION