Merge pull request #305 from ONLYOFFICE/developv4.3.0

Release/4.3.0

32 files changed, 457 insertions, 193 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8918c0..f6b3f75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log
 
+## 4.3.0
+## Added
+- integration to viewer app
+- show the version of the Document Service on the settings page
+
+## Changed
+- Nextcloud v16 is no longer supported
+- notification with toastify
+- proper header bar for public share links
+
 ## 4.2.0
 ## Added
 - review display settings
diff --git a/appinfo/application.php b/appinfo/application.php
index fe897d7..ebe7595 100644
--- a/appinfo/application.php
+++ b/appinfo/application.php
@@ -30,9 +30,12 @@
 namespace OCA\Onlyoffice\AppInfo;
 
 use OCP\AppFramework\App;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\DirectEditing\RegisterDirectEditorEvent;
 use OCP\Util;
 
+use OCA\Viewer\Event\LoadViewer;
+
 use OCA\Onlyoffice\AppConfig;
 use OCA\Onlyoffice\Controller\CallbackController;
 use OCA\Onlyoffice\Controller\EditorController;
@@ -73,15 +76,44 @@ class Application extends App {
                     && $this->appConfig->isUserAllowedToUse()) {
                     Util::addScript("onlyoffice", "desktop");
                     Util::addScript("onlyoffice", "main");
+
+                    if ($this->appConfig->GetSameTab()) {
+                        Util::addScript("onlyoffice", "listener");
+                    }
+
                     Util::addStyle("onlyoffice", "main");
                 }
             });
 
+        if (class_exists(LoadViewer::class)) {
+            $eventDispatcher->addListener(LoadViewer::class,
+                function() {
+                    if (!empty($this->appConfig->GetDocumentServerUrl())
+                        && $this->appConfig->SettingsAreSuccessful()
+                        && $this->appConfig->isUserAllowedToUse()) {
+                        Util::addScript("onlyoffice", "viewer");
+                        Util::addScript("onlyoffice", "listener");
+
+                        Util::addStyle("onlyoffice", "viewer");
+
+                        $csp = new ContentSecurityPolicy();
+                        $csp->addAllowedFrameDomain("'self'");
+                        $cspManager = $this->getContainer()->getServer()->getContentSecurityPolicyManager();
+                        $cspManager->addDefaultPolicy($csp);
+                    }
+                });
+        }
+
         $eventDispatcher->addListener("OCA\Files_Sharing::loadAdditionalScripts",
             function() {
                 if (!empty($this->appConfig->GetDocumentServerUrl())
                     && $this->appConfig->SettingsAreSuccessful()) {
                     Util::addScript("onlyoffice", "main");
+
+                    if ($this->appConfig->GetSameTab()) {
+                        Util::addScript("onlyoffice", "listener");
+                    }
+
                     Util::addStyle("onlyoffice", "main");
                 }
             });
diff --git a/appinfo/info.xml b/appinfo/info.xml
index b65838d..892e02e 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -6,7 +6,7 @@
     <description>ONLYOFFICE connector enables you to edit Office documents within ONLYOFFICE from the familiar web interface. This will create a new Open in ONLYOFFICE action within the document library for Office documents. This allows multiple users to collaborate in real time and to save back those changes to your file storage.</description>
     <licence>agpl</licence>
     <author mail="dev@onlyoffice.com" homepage="https://www.onlyoffice.com/">Ascensio System SIA</author>
-    <version>4.2.0</version>
+    <version>4.3.0</version>
     <namespace>Onlyoffice</namespace>
     <types>
         <filesystem/>
@@ -29,7 +29,7 @@
     <screenshot>https://raw.githubusercontent.com/ONLYOFFICE/onlyoffice-nextcloud/master/screenshots/new.png</screenshot>
     <screenshot>https://raw.githubusercontent.com/ONLYOFFICE/onlyoffice-nextcloud/master/screenshots/open.png</screenshot>
     <dependencies>
-        <nextcloud min-version="16" max-version="19"/>
+        <nextcloud min-version="17" max-version="19"/>
     </dependencies>
     <settings>
         <admin>OCA\Onlyoffice\AdminSettings</admin>
diff --git a/controller/editorcontroller.php b/controller/editorcontroller.php
index f20dd1f..865a534 100644
--- a/controller/editorcontroller.php
+++ b/controller/editorcontroller.php
@@ -33,6 +33,7 @@ use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\Template\PublicTemplateResponse;
 use OCP\Constants;
 use OCP\Files\File;
 use OCP\Files\Folder;
@@ -469,7 +470,8 @@ class EditorController extends Controller {
     public function index($fileId, $filePath = null, $shareToken = null, $inframe = false) {
         $this->logger->debug("Open: $fileId $filePath", ["app" => $this->appName]);
 
-        if (empty($shareToken) && !$this->userSession->isLoggedIn()) {
+        $isLoggedIn = $this->userSession->isLoggedIn();
+        if (empty($shareToken) && !$isLoggedIn) {
             $redirectUrl = $this->urlGenerator->linkToRoute("core.login.showLoginForm", [
                 "redirect_url" => $this->request->getRequestUri()
             ]);
@@ -496,11 +498,21 @@ class EditorController extends Controller {
             "inframe" => false
         ];
 
+        $response = null;
         if ($inframe === true) {
             $params["inframe"] = true;
             $response = new TemplateResponse($this->appName, "editor", $params, "plain");
         } else {
-            $response = new TemplateResponse($this->appName, "editor", $params);
+            if ($isLoggedIn) {
+                $response = new TemplateResponse($this->appName, "editor", $params);
+            } else {
+                $response = new PublicTemplateResponse($this->appName, "editor", $params);
+
+                list ($file, $error, $share) = $this->fileUtility->getFileByToken($fileId, $shareToken);
+                if (!isset($error)) {
+                    $response->setHeaderTitle($file->getName());
+                }
+            }
         }
 
         $csp = new ContentSecurityPolicy();
@@ -510,7 +522,7 @@ class EditorController extends Controller {
             $csp->addAllowedScriptDomain($documentServerUrl);
             $csp->addAllowedFrameDomain($documentServerUrl);
         } else {
-            $csp->addAllowedFrameDomain($this->urlGenerator->getAbsoluteURL("/"));
+            $csp->addAllowedFrameDomain("'self'");
         }
         $response->setContentSecurityPolicy($csp);
 
diff --git a/controller/settingscontroller.php b/controller/settingscontroller.php
index 332fd13..f1eb9b2 100644
--- a/controller/settingscontroller.php
+++ b/controller/settingscontroller.php
@@ -164,10 +164,11 @@ class SettingsController extends Controller {
         }
         $this->config->SetStorageUrl($storageUrl);
 
+        $version = null;
         if (empty($error)) {
             $documentserver = $this->config->GetDocumentServerUrl();
             if (!empty($documentserver)) {
-                $error = $this->checkDocServiceUrl();
+                list ($error, $version) = $this->checkDocServiceUrl();
                 $this->config->SetSettingsError($error);
             }
         }
@@ -177,7 +178,8 @@ class SettingsController extends Controller {
             "documentserverInternal" => $this->config->GetDocumentServerInternalUrl(true),
             "storageUrl" => $this->config->GetStorageUrl(),
             "secret" => $this->config->GetDocumentServerSecret(true),
-            "error" => $error
+            "error" => $error,
+            "version" => $version,
             ];
     }
 
@@ -266,11 +268,13 @@ class SettingsController extends Controller {
     /**
      * Checking document service location
      *
-     * @return string
+     * @return array
      */
     private function checkDocServiceUrl() {
+        $version = null;
 
         try {
+
             if (preg_match("/^https:\/\//i", $this->urlGenerator->getAbsoluteURL("/"))
                 && preg_match("/^http:\/\//i", $this->config->GetDocumentServerUrl())) {
                 throw new \Exception($this->trans->t("Mixed Active Content is not allowed. HTTPS address for Document Server is required."));
@@ -278,7 +282,7 @@ class SettingsController extends Controller {
 
         } catch (\Exception $e) {
             $this->logger->logException($e, ["Protocol on check error", "app" => $this->appName]);
-            return $e->getMessage();
+            return [$e->getMessage(), $version];
         }
 
         try {
@@ -292,7 +296,7 @@ class SettingsController extends Controller {
 
         } catch (\Exception $e) {
             $this->logger->logException($e, ["HealthcheckRequest on check error", "app" => $this->appName]);
-            return $e->getMessage();
+            return [$e->getMessage(), $version];
         }
 
         try {
@@ -314,7 +318,7 @@ class SettingsController extends Controller {
 
         } catch (\Exception $e) {
             $this->logger->logException($e, ["CommandRequest on check error", "app" => $this->appName]);
-            return $e->getMessage();
+            return [$e->getMessage(), $version];
         }
 
         $convertedFileUri = null;
@@ -330,16 +334,16 @@ class SettingsController extends Controller {
 
         } catch (\Exception $e) {
             $this->logger->logException($e, ["GetConvertedUri on check error", "app" => $this->appName]);
-            return $e->getMessage();
+            return [$e->getMessage(), $version];
         }
 
         try {
             $documentService->Request($convertedFileUri);
         } catch (\Exception $e) {
             $this->logger->logException($e, ["Request converted file on check error", "app" => $this->appName]);
-            return $e->getMessage();
+            return [$e->getMessage(), $version];
         }
 
-        return "";
+        return ["", $version];
     }
 }
diff --git a/css/editor.css b/css/editor.css
index 364cdf1..4a41ce3 100644
--- a/css/editor.css
+++ b/css/editor.css
@@ -26,14 +26,19 @@
  *
  */
 
-#content.app-onlyoffice {
+#content.app-onlyoffice,
+#body-public #content.app-onlyoffice {
     min-height: calc(100% - 50px);
 }
 
-#body-public #content {
+#body-public #content.app-public {
     height: 100%;
 }
 
+#body-public footer {
+    display: none;
+}
+
 #app > iframe {
     position: absolute;
     vertical-align: top;
diff --git a/css/viewer.css b/css/viewer.css
new file mode 100644
index 0000000..48f97e3
--- /dev/null
+++ b/css/viewer.css
@@ -0,0 +1,37 @@
+/**
+ *
+ * (c) Copyright Ascensio System SIA 2020
+ *
+ * This program is a free software product.
+ * You can redistribute it and/or modify it under the terms of the GNU Affero General Public License
+ * (AGPL) version 3 as published by the Free Software Foundation.
+ * In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * For details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions of the Program
+ * must display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product logo when distributing the program.
+ * Pursuant to Section 7(e) we decline to grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as well as technical
+ * writing content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International.
+ * See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+#onlyofficeViewerFrame {
+    background-color: #fff;
+    width: 100%;
+    height: calc(100vh - 50px);
+    display: block;
+    position: absolute;
+    top: 50px;
+    z-index: 110;
+}
diff --git a/js/editor.js b/js/editor.js
index 36d9cf1..2b6bf7b 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -35,8 +35,8 @@
 
     OCA.Onlyoffice.InitEditor = function () {
         var displayError = function (error) {
-            OC.Notification.show(error, {
-                type: "error"
+            OCP.Toast.error(error, {
+                timeout: -1
             });
         };
 
@@ -152,7 +152,9 @@
                         config.events.onRequestClose = OCA.Onlyoffice.onRequestClose;
                     }
 
-                    if (OCA.Onlyoffice.inframe && config._files_sharing && !shareToken) {
+                    if (OCA.Onlyoffice.inframe
+                        && config._files_sharing && !shareToken
+                        && window.parent.OCA.Onlyoffice.context) {
                         config.events.onRequestSharingSettings = OCA.Onlyoffice.onRequestSharingSettings;
                     }
 
@@ -199,16 +201,11 @@
             saveData,
             function onSuccess(response) {
                 if (response.error) {
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
-                OC.Notification.show(t(OCA.Onlyoffice.AppName, "File saved") + " (" + response.name + ")", {
-                    timeout: 3
-                });
+                OCP.Toast.success(t(OCA.Onlyoffice.AppName, "File saved") + " (" + response.name + ")");
             });
     };
 
@@ -238,10 +235,7 @@
             }),
             function onSuccess(response) {
                 if (response.error) {
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
@@ -272,10 +266,7 @@
             }),
             function onSuccess(response) {
                 if (response.error) {
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
@@ -325,10 +316,7 @@
             }),
             function onSuccess(response) {
                 if (response.error) {
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
diff --git a/js/listener.js b/js/listener.js
new file mode 100644
index 0000000..3f8a4d8
--- /dev/null
+++ b/js/listener.js
@@ -0,0 +1,156 @@
+/**
+ *
+ * (c) Copyright Ascensio System SIA 2020
+ *
+ * This program is a free software product.
+ * You can redistribute it and/or modify it under the terms of the GNU Affero General Public License
+ * (AGPL) version 3 as published by the Free Software Foundation.
+ * In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * For details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions of the Program
+ * must display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product logo when distributing the program.
+ * Pursuant to Section 7(e) we decline to grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as well as technical
+ * writing content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International.
+ * See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+(function (OCA) {
+
+    OCA.Onlyoffice = _.extend({
+            AppName: "onlyoffice",
+            context: null,
+            folderUrl: null,
+            frameSelector: null,
+            canExpandHeader: true,
+        }, OCA.Onlyoffice);
+
+    OCA.Onlyoffice.ShowHeaderButton = function () {
+        if (!OCA.Onlyoffice.canExpandHeader) {
+            return;
+        }
+
+        var wrapper = $("<div id='onlyofficeHeader' />")
+
+        var btnClose = $("<a class='icon icon-close-white'></a>");
+        btnClose.on("click", function() {
+            OCA.Onlyoffice.CloseEditor();
+        });
+        wrapper.prepend(btnClose);
+
+        if (!$("#isPublic").val()) {
+            var btnShare = $("<a class='icon icon-shared icon-white'></a>");
+            btnShare.on("click", function () {
+                OCA.Onlyoffice.OpenShareDialog();
+            })
+            wrapper.prepend(btnShare);
+        }
+
+        if (!$("#header .header-right").length) {
+            $("#header").append("<div class='header-right'></div>");
+        }
+        wrapper.prependTo(".header-right");
+    };
+
+    OCA.Onlyoffice.CloseEditor = function () {
+        $("body").removeClass("onlyoffice-inline");
+
+        $(OCA.Onlyoffice.frameSelector).remove();
+        $("#onlyofficeHeader").remove();
+        if (OCA.Viewer && OCA.Viewer.close) {
+            OCA.Viewer.close();
+        }
+
+        OCA.Onlyoffice.context = null;
+
+        var url = OCA.Onlyoffice.folderUrl;
+        if (!!url) {
+            window.history.pushState(null, null, url);
+            OCA.Onlyoffice.folderUrl = null;
+        }
+    };
+
+    OCA.Onlyoffice.OpenShareDialog = function () {
+        if (OCA.Onlyoffice.context) {
+            if (!$("#app-sidebar").is(":visible")) {
+                OCA.Onlyoffice.context.fileList.showDetailsView(OCA.Onlyoffice.context.fileName, "shareTabView");
+                OC.Apps.showAppSidebar();
+            } else {
+                OC.Apps.hideAppSidebar();
+            }
+        }
+    };
+
+    OCA.Onlyoffice.onRequestSaveAs = function (saveData) {
+        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Save as"),
+            function (fileDir) {
+                saveData.dir = fileDir;
+                $(OCA.Onlyoffice.frameSelector)[0].contentWindow.OCA.Onlyoffice.editorSaveAs(saveData);
+            },
+            false,
+            "httpd/unix-directory");
+    };
+
+    OCA.Onlyoffice.onRequestInsertImage = function (imageMimes) {
+        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Insert image"),
+            $(OCA.Onlyoffice.frameSelector)[0].contentWindow.OCA.Onlyoffice.editorInsertImage,
+            false,
+            imageMimes);
+    };
+
+    OCA.Onlyoffice.onRequestMailMergeRecipients = function (recipientMimes) {
+        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Select recipients"),
+            $(OCA.Onlyoffice.frameSelector)[0].contentWindow.OCA.Onlyoffice.editorSetRecipient,
+            false,
+            recipientMimes);
+    };
+
+    OCA.Onlyoffice.onRequestCompareFile = function (revisedMimes) {
+        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Select file to compare"),
+            $(OCA.Onlyoffice.frameSelector)[0].contentWindow.OCA.Onlyoffice.editorSetRevised,
+            false,
+            revisedMimes);
+    };
+
+    window.addEventListener("message", function(event) {
+        if ($(OCA.Onlyoffice.frameSelector)[0].contentWindow !== event.source
+            || !event.data["method"]) {
+            return;
+        }
+        switch (event.data.method) {
+            case "editorShowHeaderButton":
+                OCA.Onlyoffice.ShowHeaderButton();
+                break;
+            case "editorRequestClose":
+                OCA.Onlyoffice.CloseEditor();
+                break;
+            case "editorRequestSharingSettings":
+                OCA.Onlyoffice.OpenShareDialog();
+                break;
+            case "editorRequestSaveAs":
+                OCA.Onlyoffice.onRequestSaveAs(event.data.param);
+                break;
+            case "editorRequestInsertImage":
+                OCA.Onlyoffice.onRequestInsertImage(event.data.param);
+                break;
+            case "editorRequestMailMergeRecipients":
+                OCA.Onlyoffice.onRequestMailMergeRecipients(event.data.param);
+                break;
+            case "editorRequestCompareFile":
+                OCA.Onlyoffice.onRequestCompareFile(event.data.param);
+                break;
+        }
+    }, false);
+
+})(OCA);
diff --git a/js/main.js b/js/main.js
index b2c7cfe..df358c7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -31,7 +31,8 @@
     OCA.Onlyoffice = _.extend({
             AppName: "onlyoffice",
             context: null,
-            folderUrl: null
+            folderUrl: null,
+            frameSelector: null,
         }, OCA.Onlyoffice);
 
     OCA.Onlyoffice.setting = {};
@@ -63,10 +64,7 @@
                     if (winEditor) {
                         winEditor.close();
                     }
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
@@ -76,9 +74,7 @@
                 OCA.Onlyoffice.context = { fileList: fileList };
                 OCA.Onlyoffice.context.fileName = response.name;
 
-                OC.Notification.show(t(OCA.Onlyoffice.AppName, "File created"), {
-                    timeout: 3
-                });
+                OCP.Toast.success(t(OCA.Onlyoffice.AppName, "File created"));
             }
         );
     };
@@ -106,6 +102,7 @@
         } else if ($("#isPublic").val() === "1" && !$("#filestable").length) {
             location.href = url;
         } else {
+            OCA.Onlyoffice.frameSelector = "#onlyofficeFrame";
             var $iframe = $("<iframe id=\"onlyofficeFrame\" nonce=\"" + btoa(OC.requestToken) + "\" scrolling=\"no\" allowfullscreen src=\"" + url + "&inframe=true\" />");
             $("#app-content").append($iframe);
 
@@ -119,44 +116,6 @@
         }
     };
 
-    OCA.Onlyoffice.ShowHeaderButton = function () {
-        var wrapper = $("<div id='onlyofficeHeader' />")
-
-        var btnClose = $("<a class='icon icon-close-white'></a>");
-        btnClose.on("click", function() {
-            OCA.Onlyoffice.CloseEditor();
-        });
-        wrapper.prepend(btnClose);
-
-        if (!$("#isPublic").val()) {
-            var btnShare = $("<a class='icon icon-shared icon-white'></a>");
-            btnShare.on("click", function () {
-                OCA.Onlyoffice.OpenShareDialog();
-            })
-            wrapper.prepend(btnShare);
-        }
-
-        if (!$("#header .header-right").length) {
-            $("#header").append("<div class='header-right'></div>");
-        }
-        wrapper.prependTo(".header-right");
-    };
-
-    OCA.Onlyoffice.CloseEditor = function () {
-        $("body").removeClass("onlyoffice-inline");
-
-        $("#onlyofficeFrame").remove();
-        $("#onlyofficeHeader").remove();
-
-        OCA.Onlyoffice.context = null;
-
-        var url = OCA.Onlyoffice.folderUrl;
-        if (!!url) {
-            window.history.pushState(null, null, url);
-            OCA.Onlyoffice.folderUrl = null;
-        }
-    };
-
     OCA.Onlyoffice.OpenShareDialog = function () {
         if (OCA.Onlyoffice.context) {
             if (!$("#app-sidebar").is(":visible")) {
@@ -192,10 +151,7 @@
             convertData,
             function onSuccess(response) {
                 if (response.error) {
-                    OC.Notification.show(response.error, {
-                        type: "error",
-                        timeout: 3
-                    });
+                    OCP.Toast.error(response.error);
                     return;
                 }
 
@@ -203,9 +159,7 @@
                     fileList.add(response, { animate: true });
                 }
 
-                OC.Notification.show(t(OCA.Onlyoffice.AppName, "File created"), {
-                    timeout: 3
-                });
+                OCP.Toast.success(t(OCA.Onlyoffice.AppName, "File created"));
             });
     };
 
@@ -227,37 +181,6 @@
         }
     };
 
-    OCA.Onlyoffice.onRequestSaveAs = function (saveData) {
-        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Save as"),
-            function (fileDir) {
-                saveData.dir = fileDir;
-                $("#onlyofficeFrame")[0].contentWindow.OCA.Onlyoffice.editorSaveAs(saveData);
-            },
-            false,
-            "httpd/unix-directory");
-    };
-
-    OCA.Onlyoffice.onRequestInsertImage = function (imageMimes) {
-        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Insert image"),
-            $("#onlyofficeFrame")[0].contentWindow.OCA.Onlyoffice.editorInsertImage,
-            false,
-            imageMimes);
-    };
-
-    OCA.Onlyoffice.onRequestMailMergeRecipients = function (recipientMimes) {
-        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Select recipients"),
-            $("#onlyofficeFrame")[0].contentWindow.OCA.Onlyoffice.editorSetRecipient,
-            false,
-            recipientMimes);
-    };
-
-    OCA.Onlyoffice.onRequestCompareFile = function (revisedMimes) {
-        OC.dialogs.filepicker(t(OCA.Onlyoffice.AppName, "Select file to compare"),
-            $("#onlyofficeFrame")[0].contentWindow.OCA.Onlyoffice.editorSetRevised,
-            false,
-            revisedMimes);
-    };
-
     OCA.Onlyoffice.FileList = {
         attach: function (fileList) {
             if (fileList.id == "trashbin") {
@@ -381,36 +304,6 @@
         }
     };
 
-    window.addEventListener("message", function(event) {
-        if ($("#onlyofficeFrame")[0].contentWindow !== event.source
-            || !event.data["method"]) {
-            return;
-        }
-        switch (event.data.method) {
-            case "editorRequestClose":
-                OCA.Onlyoffice.CloseEditor();
-                break;
-            case "editorRequestSharingSettings":
-                OCA.Onlyoffice.OpenShareDialog();
-                break;
-            case "editorRequestSaveAs":
-                OCA.Onlyoffice.onRequestSaveAs(event.data.param);
-                break;
-            case "editorRequestInsertImage":
-                OCA.Onlyoffice.onRequestInsertImage(event.data.param);
-                break;
-            case "editorRequestMailMergeRecipients":
-                OCA.Onlyoffice.onRequestMailMergeRecipients(event.data.param);
-                break;
-            case "editorRequestCompareFile":
-                OCA.Onlyoffice.onRequestCompareFile(event.data.param);
-                break;
-            case "editorShowHeaderButton":
-                OCA.Onlyoffice.ShowHeaderButton();
-                break;
-        }
-    }, false);
-
-    $(document).ready(initPage)
+    $(document).ready(initPage);
 
 })(OCA);
diff --git a/js/settings.js b/js/settings.js
index b080e22..adaf52f 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -172,14 +172,13 @@
 
                         $(".section-onlyoffice-common, .section-onlyoffice-watermark").toggleClass("onlyoffice-hide", (!response.documentserver.length && !demo) || !!response.error.length);
 
-                        var message =
-                            response.error
-                                ? (t(OCA.Onlyoffice.AppName, "Error when trying to connect") + " (" + response.error + ")")
-                                : t(OCA.Onlyoffice.AppName, "Settings have been successfully updated");
-                        OC.Notification.show(message, {
-                            type: response.error ? "error" : null,
-                            timeout: 3
-                        });
+                        var versionMessage = response.version ? (" (" + t(OCA.Onlyoffice.AppName, "version") + " " + response.version + ")") : "";
+
+                        if (response.error) {
+                            OCP.Toast.error(t(OCA.Onlyoffice.AppName, "Error when trying to connect") + " (" + response.error + ")" + versionMessage);
+                        } else {
+                            OCP.Toast.success(t(OCA.Onlyoffice.AppName, "Settings have been successfully updated") + versionMessage);
+                        }
                     }
                 }
             });
@@ -228,10 +227,7 @@
                 success: function onSuccess(response) {
                     $(".section-onlyoffice").removeClass("icon-loading");
                     if (response) {
-                        var message = t(OCA.Onlyoffice.AppName, "Settings have been successfully updated");
-                        OC.Notification.show(message, {
-                            timeout: 3
-                        });
+                        OCP.Toast.success(t(OCA.Onlyoffice.AppName, "Settings have been successfully updated"));
                     }
                 }
             });
@@ -276,10 +272,7 @@
                 success: function onSuccess(response) {
                     $(".section-onlyoffice").removeClass("icon-loading");
                     if (response) {
-                        var message = t(OCA.Onlyoffice.AppName, "Settings have been successfully updated");
-                        OC.Notification.show(message, {
-                            timeout: 3
-                        });
+                        OCP.Toast.success(t(OCA.Onlyoffice.AppName, "Settings have been successfully updated"));
                     }
                 }
             });
diff --git a/js/viewer.js b/js/viewer.js
new file mode 100644
index 0000000..183a8e3
--- /dev/null
+++ b/js/viewer.js
@@ -0,0 +1,121 @@
+/**
+ *
+ * (c) Copyright Ascensio System SIA 2020
+ *
+ * This program is a free software product.
+ * You can redistribute it and/or modify it under the terms of the GNU Affero General Public License
+ * (AGPL) version 3 as published by the Free Software Foundation.
+ * In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * For details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions of the Program
+ * must display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product logo when distributing the program.
+ * Pursuant to Section 7(e) we decline to grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as well as technical
+ * writing content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International.
+ * See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+(function (OCA) {
+    if (OCA.Onlyoffice) {
+        return;
+    }
+
+    OCA.Onlyoffice = {
+            AppName: "onlyoffice",
+            frameSelector: null,
+            setting: {},
+        };
+
+    OCA.Onlyoffice.GetSettings = function (callbackSettings) {
+        if (OCA.Onlyoffice.setting.formats) {
+
+            callbackSettings();
+
+        } else {
+
+            $.get(OC.generateUrl("apps/" + OCA.Onlyoffice.AppName + "/ajax/settings"),
+                function onSuccess(settings) {
+                    OCA.Onlyoffice.setting = settings;
+
+                    callbackSettings();
+                }
+            );
+
+        }
+    };
+
+    var OnlyofficeViewerVue = {
+        name: "OnlyofficeViewerVue",
+        render: function (createElement) {
+            var self = this;
+
+            return createElement("iframe", {
+                attrs: {
+                    id: "onlyofficeViewerFrame",
+                    scrolling: "no",
+                    src: self.url + "&inframe=true",
+                },
+                on: {
+                    load: function() {
+                        self.doneLoading();
+                    },
+                },
+            })
+        },
+        props: {
+            filename: {
+                type: String,
+                default: null
+            },
+            fileid: {
+                type: Number,
+                default: null
+            }
+        },
+        data: function () {
+            return {
+                url: OC.generateUrl("/apps/" + OCA.Onlyoffice.AppName + "/{fileId}?filePath={filePath}",
+                    {
+                        fileId: this.fileid,
+                        filePath: this.filename
+                    })
+            }
+        }
+    };
+
+    var initPage = function () {
+        if (OCA.Viewer) {
+            OCA.Onlyoffice.canExpandHeader = false;
+
+            OCA.Onlyoffice.frameSelector = "#onlyofficeViewerFrame";
+
+            OCA.Onlyoffice.GetSettings(function(){
+
+                var mimes = $.map(OCA.Onlyoffice.setting.formats, function(format) {
+                    return format.mime;
+                });
+
+                OCA.Viewer.registerHandler({
+                    id: OCA.Onlyoffice.AppName,
+                    group: "documents",
+                    mimes: mimes,
+                    component: OnlyofficeViewerVue
+                })
+            });
+        }
+    };
+
+    $(document).ready(initPage)
+
+})(OCA);
diff --git a/l10n/bg.js b/l10n/bg.js
index 8c9eed2..6583a7a 100644
--- a/l10n/bg.js
+++ b/l10n/bg.js
@@ -49,6 +49,7 @@ OC.L10N.register(
     "File saved" : "Файлът е запазен",
     "Insert image" : "Вмъкване на изображение",
     "Select recipients" : "Изберете получатели",
-    "Select tag" : "Изберете етикет"
+    "Select tag" : "Изберете етикет",
+    "version": "версия"
 },
 "nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);");
diff --git a/l10n/bg.json b/l10n/bg.json
index 8eda69e..1a728d4 100644
--- a/l10n/bg.json
+++ b/l10n/bg.json
@@ -47,6 +47,7 @@
     "File saved" : "Файлът е запазен",
     "Insert image" : "Вмъкване на изображение",
     "Select recipients" : "Изберете получатели",
-    "Select tag" : "Изберете етикет"
+    "Select tag" : "Изберете етикет",
+    "version": "версия"
 },"pluralForm" :"nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);"
 }
\ No newline at end of file
diff --git a/l10n/de.js b/l10n/de.js
index 936a634..b0e6c9a 100644
--- a/l10n/de.js
+++ b/l10n/de.js
@@ -81,6 +81,7 @@ OC.L10N.register(
     "Select file to compare" : "Datei zum Vergleich auswählen",
     "Markup": "Markup",
     "Final": "Endgültig",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/de.json b/l10n/de.json
index c194c9c..e1765ef 100644
--- a/l10n/de.json
+++ b/l10n/de.json
@@ -79,6 +79,7 @@
     "Select file to compare" : "Datei zum Vergleich auswählen",
     "Markup": "Markup",
     "Final": "Endgültig",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/de_DE.js b/l10n/de_DE.js
index b0e573e..bd466ce 100644
--- a/l10n/de_DE.js
+++ b/l10n/de_DE.js
@@ -81,6 +81,7 @@ OC.L10N.register(
     "Select file to compare" : "Datei zum Vergleich auswählen",
     "Markup": "Markup",
     "Final": "Endgültig",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index b6a53f4..317a440 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -79,6 +79,7 @@
     "Select file to compare" : "Datei zum Vergleich auswählen",
     "Markup": "Markup",
     "Final": "Endgültig",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/es.js b/l10n/es.js
index 7f13393..03636c0 100644
--- a/l10n/es.js
+++ b/l10n/es.js
@@ -64,6 +64,7 @@ OC.L10N.register(
     "Select file to compare" : "Seleccione un archivo para comparar",
     "Markup": "Cambios",
     "Final": "Final",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "versión"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/es.json b/l10n/es.json
index 54728f9..0a5d8a7 100644
--- a/l10n/es.json
+++ b/l10n/es.json
@@ -62,6 +62,7 @@
     "Select file to compare" : "Seleccione un archivo para comparar",
     "Markup": "Cambios",
     "Final": "Final",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "versión"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/fr.js b/l10n/fr.js
index c8ae66f..8aa8817 100644
--- a/l10n/fr.js
+++ b/l10n/fr.js
@@ -62,6 +62,7 @@ OC.L10N.register(
     "Select file to compare" : "Sélectionner fichier à comparer",
     "Markup": "Balisage",
     "Final": "Finale",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/fr.json b/l10n/fr.json
index 43eec6f..eaea67d 100644
--- a/l10n/fr.json
+++ b/l10n/fr.json
@@ -60,6 +60,7 @@
     "Select file to compare" : "Sélectionner fichier à comparer",
     "Markup": "Balisage",
     "Final": "Finale",
-    "Original": "Original"
+    "Original": "Original",
+    "version": "version"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
diff --git a/l10n/pl.js b/l10n/pl.js
index 900e20f..e7491b6 100644
--- a/l10n/pl.js
+++ b/l10n/pl.js
@@ -77,6 +77,7 @@ OC.L10N.register(
     "Show watermark for download hidden shares" : "Pokaż znak wodny dla udostępnień z ukrytym pobieraniem",

     "Show watermark for read only link shares" : "Pokaż znak wodny dla udostępnień linków tylko do odczytu",

     "Show watermark on link shares with specific system tags" : "Pokaż znak wodny dla udostępnień linków z wybranymi tagami",

-    "Select tag" : "Wybierz tag"

+    "Select tag" : "Wybierz tag",

+    "version": "wersja"

 },

 "nplurals=2; plural=(n != 1);");
\ No newline at end of file
diff --git a/l10n/pl.json b/l10n/pl.json
index c64e43b..4159082 100644
--- a/l10n/pl.json
+++ b/l10n/pl.json
@@ -75,6 +75,7 @@
     "Show watermark for download hidden shares" : "Pokaż znak wodny dla udostępnień z ukrytym pobieraniem",

     "Show watermark for read only link shares" : "Pokaż znak wodny dla udostępnień linków tylko do odczytu",

     "Show watermark on link shares with specific system tags" : "Pokaż znak wodny dla udostępnień linków z wybranymi tagami",

-    "Select tag" : "Wybierz tag"

+    "Select tag" : "Wybierz tag",

+    "version": "wersja"

 },"pluralForm" :"nplurals=2; plural=(n != 1);"

 }
\ No newline at end of file
diff --git a/l10n/pt_BR.js b/l10n/pt_BR.js
index 99aa6f8..5ab9687 100644
--- a/l10n/pt_BR.js
+++ b/l10n/pt_BR.js
@@ -61,6 +61,7 @@ OC.L10N.register(
     "Secure view enables you to secure documents by embedding a watermark" : "A visualização segura permite proteger documentos incorporando uma marca d'água",
     "Supported placeholders" : "Espaços reservados suportados",
     "Select tag" : "Selecionar etiqueta",
-    "Select file to compare" : "Selecionar arquivo para comparar"
+    "Select file to compare" : "Selecionar arquivo para comparar",
+    "version": "versão"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/pt_BR.json b/l10n/pt_BR.json
index f0181e9..badf9de 100644
--- a/l10n/pt_BR.json
+++ b/l10n/pt_BR.json
@@ -59,6 +59,7 @@
     "Secure view enables you to secure documents by embedding a watermark" : "A visualização segura permite proteger documentos incorporando uma marca d'água",
     "Supported placeholders" : "Espaços reservados suportados",
     "Select tag" : "Selecionar etiqueta",
-    "Select file to compare" : "Selecionar arquivo para comparar"
+    "Select file to compare" : "Selecionar arquivo para comparar",
+    "version": "versão"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
diff --git a/l10n/ru.js b/l10n/ru.js
index ad2d0fa..f7aa20b 100644
--- a/l10n/ru.js
+++ b/l10n/ru.js
@@ -82,6 +82,7 @@ OC.L10N.register(
     "Review mode for viewing": "Режим рецензирования при просмотре",
     "Markup": "Изменения",
     "Final": "Изменённый документ",
-    "Original": "Исходный документ"
+    "Original": "Исходный документ",
+    "version": "версия"
 },
 "nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);");
diff --git a/l10n/ru.json b/l10n/ru.json
index ae1ee6e..884f244 100644
--- a/l10n/ru.json
+++ b/l10n/ru.json
@@ -80,6 +80,7 @@
     "Review mode for viewing": "Режим рецензирования при просмотре",
     "Markup": "Изменения",
     "Final": "Изменённый документ",
-    "Original": "Исходный документ"
+    "Original": "Исходный документ",
+    "version": "версия"
 },"pluralForm" :"nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);"
 }
\ No newline at end of file
diff --git a/l10n/sv.js b/l10n/sv.js
index d09b1c1..91122fb 100644
--- a/l10n/sv.js
+++ b/l10n/sv.js
@@ -77,6 +77,7 @@ OC.L10N.register(
     "Show watermark for download hidden shares" : "Visa vattenstämpel för delningar med gömd nedladdning",
     "Show watermark for read only link shares" : "Visa vattenmärke för skrivskyddade länkdelningar",
     "Show watermark on link shares with specific system tags" : "Visa vattenmärke för länkdelningar med specifika systemtaggar",
-    "Select tag" : "Välj tagg"
+    "Select tag" : "Välj tagg",
+    "version": "verzia"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/sv.json b/l10n/sv.json
index cf49eab..22985dc 100644
--- a/l10n/sv.json
+++ b/l10n/sv.json
@@ -75,6 +75,7 @@
     "Show watermark for download hidden shares" : "Visa vattenstämpel för delningar med gömd nedladdning",
     "Show watermark for read only link shares" : "Visa vattenmärke för skrivskyddade länkdelningar",
     "Show watermark on link shares with specific system tags" : "Visa vattenmärke för länkdelningar med specifika systemtaggar",
-    "Select tag" : "Välj tagg"
+    "Select tag" : "Välj tagg",
+    "version": "verzia"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/lib/directeditor.php b/lib/directeditor.php
index dc8da51..33cea55 100644
--- a/lib/directeditor.php
+++ b/lib/directeditor.php
@@ -256,7 +256,7 @@ class DirectEditor implements IEditor {
                 $csp->addAllowedScriptDomain($documentServerUrl);
                 $csp->addAllowedFrameDomain($documentServerUrl);
             } else {
-                $csp->addAllowedFrameDomain($this->urlGenerator->getAbsoluteURL("/"));
+                $csp->addAllowedFrameDomain("'self'");
             }
             $response->setContentSecurityPolicy($csp);
 
diff --git a/templates/settings.php b/templates/settings.php
index 64b7b56..222fe3d 100644
--- a/templates/settings.php
+++ b/templates/settings.php
@@ -31,11 +31,6 @@
     script("onlyoffice", "settings");
 
     if ($_["tagsEnabled"]) {
-        if (\version_compare(\implode(".", \OCP\Util::getVersion()), "16", "<")) {
-            script("core", [
-                "oc-backbone-webdav"
-            ]);
-        }
         script("core", [
             "systemtags/systemtags",
             "systemtags/systemtagmodel",