[onlyoffice file view] added a custom toolbar(star/unstar, smart link… (#6880)

* [onlyoffice file view] added a custom toolbar(star/unstar, smart link, details, open parent folder, fold/unfold) * [onlyoffice file view] added a new 'details' panel for it
2025-09-12 13:24:52 +00:00 · 2024-10-12 20:32:39 +08:00
parent 5b243908a7
commit 3cdb6260e1
13 changed files with 498 additions and 43 deletions
--- a/frontend/config/webpack.entry.js
+++ b/frontend/config/webpack.entry.js
@@ -30,6 +30,7 @@ const entryFiles = {
  viewFileText: '/view-file-text.js',
  viewFileSdoc: '/view-file-sdoc.js',
  viewFileDocument: '/view-file-document.js',
+  viewFileOnlyoffice: '/view-file-onlyoffice.js',
  viewFileSpreadsheet: '/view-file-spreadsheet.js',
  settings: '/settings.js',
  repoHistory: '/repo-history.js',
--- a/frontend/src/assets/icons/double-arrow-down.svg
+++ b/frontend/src/assets/icons/double-arrow-down.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>unfold</title>
+<g id="unfold">
+	<path id="形状结合" class="st0" d="M16,17.6c0.3,0,0.7-0.1,0.9-0.4l10.7-11c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.3-0.5-1.8,0
+		l-9.8,10l-9.8-10c-0.5-0.5-1.3-0.5-1.8,0C4.1,4.6,4,5,4,5.3C4,5.7,4.1,6,4.4,6.3l10.7,11C15.3,17.5,15.7,17.6,16,17.6z M16,28
+		c0.3,0,0.7-0.1,0.9-0.4l10.7-11c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.3-0.5-1.8,0l-9.8,10l-9.8-10c-0.5-0.5-1.3-0.5-1.8,0
+		C4.1,15,4,15.3,4,15.7s0.1,0.7,0.4,0.9l10.7,11C15.3,27.9,15.7,28,16,28z"/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/double-arrow-up.svg
+++ b/frontend/src/assets/icons/double-arrow-up.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>fold</title>
+<g id="fold">
+	<path id="形状结合" class="st0" d="M16,14.4c0.3,0,0.7,0.1,0.9,0.4l10.7,11c0.5,0.5,0.5,1.4,0,1.9c-0.5,0.5-1.3,0.5-1.8,0
+		l-9.8-10l-9.8,10c-0.5,0.5-1.3,0.5-1.8,0C4.1,27.4,4,27,4,26.7c0-0.4,0.1-0.7,0.4-0.9l10.7-11C15.3,14.5,15.7,14.4,16,14.4z M16,4
+		c0.3,0,0.7,0.1,0.9,0.4l10.7,11c0.5,0.5,0.5,1.4,0,1.9c-0.5,0.5-1.3,0.5-1.8,0L16,7.3l-9.8,10c-0.5,0.5-1.3,0.5-1.8,0
+		C4.1,17,4,16.7,4,16.3c0-0.4,0.1-0.7,0.4-0.9l10.7-11C15.3,4.1,15.7,4,16,4z"/>
+</g>
+</svg>
--- a/frontend/src/components/dirent-detail/embedded-file-details/index.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -10,7 +10,7 @@ import { MetadataContext } from '../../../metadata';

 import './index.css';

-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
  const { headerComponent } = component;
  const [direntDetail, setDirentDetail] = useState('');

--- a/frontend/src/components/file-view/file-info.js
+++ b/frontend/src/components/file-view/file-info.js
@@ -7,7 +7,8 @@ import InternalLinkOperation from '../operations/internal-link-operation';
 const propTypes = {
  toggleStar: PropTypes.func.isRequired,
  isLocked: PropTypes.bool.isRequired,
-  isStarred: PropTypes.bool.isRequired
+  isStarred: PropTypes.bool.isRequired,
+  isOnlyofficeFile: PropTypes.bool.isRequired
 };

 const { fileName, repoID, filePath,
@@ -26,7 +27,7 @@ class FileInfo extends React.PureComponent {
  };

  render() {
-    const { isStarred, isLocked } = this.props;
+    const { isStarred, isLocked, isOnlyofficeFile } = this.props;
    const starredText = isStarred ? gettext('starred') : gettext('unstarred');
    const lockedText = gettext('locked');
    return (
@@ -41,7 +42,7 @@ class FileInfo extends React.PureComponent {
            onClick={this.toggleStar}>
          </a>
          <InternalLinkOperation repoID={repoID} path={filePath} />
-          {(isPro && isLocked) &&
+          {(isPro && isLocked && !isOnlyofficeFile) &&
            <img className="file-locked-icon" width="16"
              src={`${mediaUrl}img/file-locked-32.png`}
              alt={lockedText}
@@ -50,10 +51,12 @@ class FileInfo extends React.PureComponent {
            />
          }
        </h2>
+        {!isOnlyofficeFile && (
          <div className="meta-info">
            <a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
            <span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
          </div>
+        )}
      </div>
    );
  }
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -84,8 +84,9 @@ class FileToolbar extends React.Component {
      return null;
    }

-    const { isLocked, lockedByMe } = this.props;
    const { moreDropdownOpen } = this.state;
+
+    const { isLocked, lockedByMe } = this.props;
    let showLockUnlockBtn = false;
    let lockUnlockText; let lockUnlockIcon;
    if (canLockUnlockFile) {
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -2,12 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import watermark from 'watermark-dom';
 import { seafileAPI } from '../../utils/seafile-api';
-import { siteName } from '../../utils/constants';
+import { gettext, siteName } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+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';

 import '../../css/file-view.css';

@@ -16,16 +20,16 @@ const propTypes = {
  content: PropTypes.object.isRequired,
  isSaving: PropTypes.bool,
  needSave: PropTypes.bool,
+  isOnlyofficeFile: PropTypes.bool,
  participants: PropTypes.array,
  onParticipantsChange: PropTypes.func,
 };

 const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, enableWatermark, userNickName,
+  repoID, filePath, filePerm, enableWatermark, userNickName,
  repoName, parentDir, fileName
 } = window.app.pageOptions;

-
 class FileView extends React.Component {

  constructor(props) {
@@ -34,6 +38,7 @@ class FileView extends React.Component {
      isStarred: isStarred,
      isLocked: isLocked,
      lockedByMe: lockedByMe,
+      isHeaderShown: true,
      isDetailsPanelOpen: false
    };
  }
@@ -93,16 +98,29 @@ class FileView extends React.Component {
    }
  };

+  toggleHeader = () => {
+    this.setState({
+      isHeaderShown: !this.state.isHeaderShown
+    });
+  };
+
  render() {
-    const { isDetailsPanelOpen } = this.state;
+    const { isOnlyofficeFile = false } = this.props;
+    const { isDetailsPanelOpen, isHeaderShown } = this.state;
    return (
      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between align-items-center d-print-none">
+        <div className={`file-view-header d-flex justify-content-between align-items-center d-print-none ${isOnlyofficeFile ? (isHeaderShown ? 'onlyoffice-file-view-header-shown' : 'onlyoffice-file-view-header-hidden') : ''}`}>
          <FileInfo
            isStarred={this.state.isStarred}
            isLocked={this.state.isLocked}
            toggleStar={this.toggleStar}
+            isOnlyofficeFile={isOnlyofficeFile}
          />
+          {isOnlyofficeFile ?
+            <OnlyofficeFileToolbar
+              toggleDetailsPanel={this.toggleDetailsPanel}
+              toggleHeader={this.toggleHeader}
+            /> :
            <FileToolbar
              isLocked={this.state.isLocked}
              lockedByMe={this.state.lockedByMe}
@@ -112,10 +130,33 @@ class FileView extends React.Component {
              toggleLockFile={this.toggleLockFile}
              toggleDetailsPanel={this.toggleDetailsPanel}
            />
+          }
        </div>
-        <div className="file-view-body flex-auto d-flex o-hidden">
+        <div className={`file-view-body flex-auto d-flex o-hidden ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
+          {(isOnlyofficeFile && !isHeaderShown) &&
+            <IconButton
+              id="unfold-onlyoffice-file-view-header"
+              icon='double-arrow-down'
+              text={gettext('Unfold')}
+              onClick={this.toggleHeader}
+            />
+          }
          {this.props.content}
-          {isDetailsPanelOpen &&
+          {isDetailsPanelOpen && (
+            <>
+              {isOnlyofficeFile ?
+                <EnableMetadataProvider repoID={repoID} >
+                  <CollaboratorsProvider repoID={repoID}>
+                    <EmbeddedFileDetails
+                      repoID={repoID}
+                      path={filePath}
+                      dirent={{ 'name': fileName, type: 'file' }}
+                      repoInfo={{ permission: filePerm }}
+                      onClose={this.toggleDetailsPanel}
+                    />
+                  </CollaboratorsProvider>
+                </EnableMetadataProvider>
+                :
                <FileDetails
                  repoID={repoID}
                  repoName={repoName}
@@ -124,6 +165,8 @@ class FileView extends React.Component {
                  togglePanel={this.toggleDetailsPanel}
                />
              }
+            </>
+          )}
        </div>
      </div>
    );
--- a/frontend/src/components/file-view/onlyoffice-file-toolbar.js
+++ b/frontend/src/components/file-view/onlyoffice-file-toolbar.js
@@ -0,0 +1,95 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { gettext, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Icon from '../../components/icon';
+import IconButton from '../icon-button';
+
+const propTypes = {
+  toggleDetailsPanel: PropTypes.func.isRequired,
+  toggleHeader: PropTypes.func.isRequired
+};
+
+const {
+  repoID, repoName, parentDir
+} = window.app.pageOptions;
+
+class OnlyofficeFileToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+      moreDropdownOpen: false
+    };
+  }
+
+  toggleMoreOpMenu = () => {
+    this.setState({
+      moreDropdownOpen: !this.state.moreDropdownOpen
+    });
+  };
+
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  };
+
+  render() {
+    const { moreDropdownOpen } = this.state;
+    return (
+      <Fragment>
+        <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
+          <IconButton
+            id="file-details"
+            icon='info'
+            text={gettext('Details')}
+            onClick={this.props.toggleDetailsPanel}
+          />
+          <Dropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
+            <DropdownToggle
+              className="file-toolbar-btn"
+              aria-label={gettext('More operations')}
+              title={gettext('More operations')}
+              tag="div"
+            >
+              <Icon symbol="more-vertical" />
+            </DropdownToggle>
+            <DropdownMenu right={true}>
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
+                {gettext('Open parent folder')}
+              </a>
+            </DropdownMenu>
+          </Dropdown>
+          <IconButton
+            id="fold-header"
+            icon='double-arrow-up'
+            text={gettext('Fold')}
+            onClick={this.props.toggleHeader}
+          />
+        </div>
+
+        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
+          <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
+            <Icon symbol="more-vertical" />
+          </DropdownToggle>
+          <DropdownMenu right={true}>
+            <DropdownItem onClick={this.props.toggleHeader}>{gettext('Fold')}</DropdownItem>
+            <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
+            <DropdownItem>
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
+                {gettext('Open parent folder')}
+              </a>
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </Fragment>
+    );
+  }
+}
+
+OnlyofficeFileToolbar.propTypes = propTypes;
+
+export default OnlyofficeFileToolbar;
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -13,10 +13,39 @@ body {
  flex-shrink: 0;
 }

+.onlyoffice-file-view-header-shown {
+  transition: height .3s ease-in-out;
+  height: 56px;
+}
+
+.onlyoffice-file-view-header-hidden {
+  transition: all .3s ease-in-out;
+  display: none!important;
+}
+
+#unfold-onlyoffice-file-view-header {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255,255,255, 0.6);
+  border-radius: 0 0 14px 14px;
+  box-shadow: 0 0 8px rgba(0,0,0, 0.4);
+  cursor: pointer;
+}
+
+#unfold-onlyoffice-file-view-header:hover {
+  background: rgba(255,255,255, 1);
+}
+
 .file-view-header .file-toolbar-btn {
  width: 28px;
  height: 28px;
-  margin-right: 10px;
+  margin-left: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -399,14 +399,14 @@ export const Utils = {
    if (!dirent) return '';
    let size = Utils.isHiDPI() ? 48 : 24;
    size = isBig ? 192 : size;
-    if (dirent.isDir()) {
+    if (dirent.type == 'file') {
+      return Utils.getFileIconUrl(dirent.name);
+    } else {
      let readonly = false;
      if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
        readonly = true;
      }
      return Utils.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
-    } else {
-      return Utils.getFileIconUrl(dirent.name);
    }
  },

--- a/frontend/src/view-file-onlyoffice.js
+++ b/frontend/src/view-file-onlyoffice.js
@@ -0,0 +1,33 @@
+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 ViewFileOnlyoffice extends React.Component {
+  render() {
+    return (
+      <FileView content={<FileContent />} isOnlyofficeFile={true} />
+    );
+  }
+}
+
+class FileContent extends React.Component {
+
+  render() {
+    if (err) {
+      return <FileViewTip />;
+    }
+
+    return (
+      <div className="file-view-content flex-1 p-0 border-0">
+        <div id="placeholder"></div>
+      </div>
+    );
+  }
+}
+
+ReactDom.render(<ViewFileOnlyoffice />, document.getElementById('wrapper'));
--- a/seahub/templates/onlyoffice_file_view_react.html
+++ b/seahub/templates/onlyoffice_file_view_react.html
@@ -0,0 +1,220 @@
+{% extends 'file_view_react.html' %}
+{% load render_bundle from webpack_loader %}
+{% load seahub_tags avatar_tags i18n static %}
+
+{% block extra_style %}
+{% render_bundle 'viewFileOnlyoffice' 'css' %}
+{% endblock %}
+
+{% block extra_data %}
+{% endblock %}
+
+{% block render_bundle %}
+{% render_bundle 'viewFileOnlyoffice' 'js' %}
+
+{% get_current_language as LANGUAGE_CODE %}
+<script type="text/javascript" src="{% static "scripts/lib/jquery.min.js" %}"></script>
+<script type="text/javascript" src="{{ MEDIA_URL }}js/base.js?t=1536127546642"></script>
+<script type="text/javascript" src="{{ ONLYOFFICE_APIJS_URL }}"></script>
+<script type="text/javascript">
+  {% if onlyoffice_jwt_token %}
+  var onRequestHistory = function() {
+    $.ajax({
+      url: '{% url "api-v2.1-new-file-history-view" repo_id %}' + '?path={{path|urlencode}}',
+      type: 'GET',
+      dataType: 'json',
+      cache: false,
+      success: function(resp) {
+        var history = [];
+        resp.data.reverse().forEach (function (item) {
+          history.push({
+            "created": item.ctime,
+            "key": item.rev_file_id,
+            "user": {
+              "id": item.creator_email,
+              "name": item.creator_name
+            },
+            "version": item.rev_file_id
+          });
+        });
+        docEditor.refreshHistory({
+          "currentVersion": history.at(-1).version,
+          "history": history
+        });
+      }
+    });
+  };
+  var onRequestHistoryData = function(event) {
+    var version = event.data;
+    var data = {
+      "repo_id": "{{repo_id}}",
+      "file_path": "{{path}}",
+      "obj_id": version
+    };
+
+    $.ajax({
+      url: '{% url "onlyoffice_api_get_history_file_access_token" %}',
+      type: 'POST',
+      dataType: 'json',
+      cache: false,
+      beforeSend: prepareCSRFToken,
+      data: data,
+      success: function(resp) {
+        docEditor.setHistoryData(resp.data);
+      }
+    });
+  };
+  var onRequestHistoryClose = function () {
+    document.location.reload();
+  };
+
+  var onRequestReferenceData = function (event) {
+    $.ajax({
+      url: '{% url "onlyoffice_api_get_reference_data" %}',
+      type: 'POST',
+      dataType: 'json',
+      cache: false,
+      data: event.data.referenceData,
+      beforeSend: prepareCSRFToken,
+      success: function(resp) {
+        docEditor.setReferenceData(resp.data);
+      },
+      error: function(xhr, status, error) {
+        if (xhr.responseText) {
+          errMsg = JSON.parse(xhr.responseText).error_msg;
+        } else {
+          errMsg = "{% trans "Failed. Please check the network." %}";
+        }
+        docEditor.setReferenceData({
+          "error": errMsg
+        })
+      }
+    });
+  };
+  {% endif %}
+  var config = {
+    {% if onlyoffice_jwt_token %}
+    "events": {
+      "onRequestReferenceData": onRequestReferenceData,
+      "onRequestHistory": onRequestHistory,
+      "onRequestHistoryData": onRequestHistoryData,
+      "onRequestHistoryClose": onRequestHistoryClose,
+    },
+    {% endif %}
+    "type": window.screen.width < 992 ? 'mobile' : 'desktop',
+    "document": {
+      "fileType": "{{ file_type }}",
+      "key": "{{ doc_key }}",
+      "title": "{{ doc_title|escapejs }}",
+      "url": "{{ doc_url }}",
+      "permissions": {
+        "download": {% if can_download %}true{% else %}false{% endif %},
+        "edit": {% if can_edit %}true{% else %}false{% endif %},
+        "copy": {% if can_copy %}true{% else %}false{% endif %},
+        "print": {% if can_download %}true{% else %}false{% endif %},
+        "review": true
+      },
+      "referenceData": {
+        "fileKey": '{{ file_key }}',
+        "instanceId": "{{ instance_id }}",
+      },
+    },
+    "documentType": "{{ document_type }}", // 'text' | 'spreadsheet' | 'presentation',
+    {% if onlyoffice_jwt_token %}
+    "token": "{{ onlyoffice_jwt_token }}",
+    {% endif %}
+    "editorConfig": {
+      "callbackUrl": "{{ callback_url }}",
+      "lang": "{{ LANGUAGE_CODE }}",
+      "mode": {% if can_edit %}"edit"{% else %}"view"{% endif %},
+      "customization": {
+        "forcesave": {% if onlyoffice_force_save %}true{% else %}false{% endif %},
+        {% if not request.user.is_authenticated %}
+        "anonymous": {
+          "request": true,
+          "label": "Guest"
+        },
+        {% endif %}
+      },
+      {% if request.user.is_authenticated %}
+      "user": {
+        "id": "{{ username|escapejs }}",
+        "name": "{{ username|email2nickname|escapejs }}",
+        "image": "{{ avatar_url }}",
+      }
+      {% endif %}
+    }
+  };
+  var docEditor = new DocsAPI.DocEditor("placeholder", config);
+</script>
+<script type="text/javascript">
+  var SEAFILE_GLOBAL = {
+    csrfCookieName: '{{ CSRF_COOKIE_NAME }}'
+  };
+
+  {% if can_edit %}
+  var interval;
+  {% if not share_link_token %}
+  var refreshLock = function() {
+    $.ajax({
+      url: '{% url "api-v2.1-file-view" repo_id %}' + '?p={{path|urlencode}}',
+      type: 'PUT',
+      dataType: 'json',
+      data: {
+        'operation': 'refresh-lock',
+        'expire': 2400
+      },
+      cache: false,
+      beforeSend: prepareCSRFToken,
+      success: function(data) {
+      },
+      error: function(xhr) {
+        if (xhr.responseText) {
+          feedback(JSON.parse(xhr.responseText).error_msg, 'error');
+        } else {
+          feedback("{% trans "Failed. Please check the network." %}", 'error');
+        }
+        clearInterval(interval);
+      }
+    });
+  };
+  {% else %}
+  var refreshLock = function() {
+    $.ajax({
+      url: '{% url "api-v2.1-share-link-online-office-lock" share_link_token %}',
+      type: 'PUT',
+      dataType: 'json',
+      data: {
+        'expire': 2400
+      },
+      cache: false,
+      beforeSend: prepareCSRFToken,
+      success: function(data) {
+      },
+      error: function(xhr) {
+        if (xhr.responseText) {
+          feedback(JSON.parse(xhr.responseText).error_msg, 'error');
+        } else {
+          feedback("{% trans "Failed. Please check the network." %}", 'error');
+        }
+        clearInterval(interval);
+      }
+    });
+  };
+  {% endif %}
+  interval = setInterval(refreshLock, 40 * 60 * 1000);
+  {% endif %}
+</script>
+{% if request_from_onlyoffice_desktop_editor %}
+<script type="text/javascript">
+  var params = {
+    "displayName": "{{request.user.username|email2nickname|escapejs}}",
+    "email": "{{request.user.username|escapejs}}",
+    "domain": "{{service_url}}",
+    "provider": "seafile",
+    "userId": "{{request.user.username|escapejs}}",
+  };
+  window.AscDesktopEditor.execCommand('portal:login', JSON.stringify(params));
+</script>
+{% endif %}
+{% endblock %}
--- a/seahub/views/file.py
+++ b/seahub/views/file.py
@@ -863,7 +863,7 @@ def view_lib_file(request, repo_id, path):

                send_file_access_msg(request, repo, path, 'web')

-                return render(request, 'view_file_onlyoffice.html', onlyoffice_dict)
+                return render(request, 'onlyoffice_file_view_react.html', {**return_dict, **onlyoffice_dict})
            else:
                return_dict['err'] = _('Error when prepare OnlyOffice file preview page.')