Web: Files: added opening of files through the mouse wheel in a new tab

products/ASC.Files/Client/src/Files.jsx

@@ -29,6 +29,7 @@ const SETTINGS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/settings/:setting");
 const HISTORY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/:fileId/history");
 const PRIVATE_ROOMS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/private");
 const FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/filter");
+const MEDIA_VIEW_URL = combineUrl(PROXY_HOMEPAGE_URL, "/view");
 
 if (!window.AppServer) {
   window.AppServer = {};
@@ -40,6 +41,7 @@ window.AppServer.files = {
   HISTORY_URL,
   PRIVATE_ROOMS_URL,
   FILTER_URL,
+  MEDIA_VIEW_URL,
 };
 
 const Error404 = React.lazy(() => import("studio/Error404"));
@@ -113,6 +115,7 @@ class FilesContent extends React.Component {
           <PrivateRoute path={PRIVATE_ROOMS_URL} component={PrivateRoomsPage} />
           <PrivateRoute exact path={HOME_URL} component={Home} />
           <PrivateRoute path={FILTER_URL} component={Home} />
+          <PrivateRoute path={MEDIA_VIEW_URL} component={Home} />
           <PrivateRoute component={Error404Route} />
         </Switch>
       </>

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -109,6 +109,9 @@ export default function withFileActions(WrappedFileItem) {
       } = this.props;
       const notSelectable = e.target.classList.contains("not-selectable");
 
+      if (e.button === 1) {
+        return localStorage.setItem("location", JSON.stringify(location));
+      }
       this.setState({ isMouseDown: true });
 
       if (!draggable || isPrivacy) return;
@@ -196,6 +199,7 @@ export default function withFileActions(WrappedFileItem) {
 
       if (isTrashFolder) return;
       if (e && e.target.tagName === "INPUT") return;
+      e.preventDefault();
 
       if (!fileExst && !contentLength) {
         setIsLoading(true);

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js

@@ -10,6 +10,9 @@ import RowContent from "@appserver/components/row-content";
 
 import withContent from "../../../../../HOCs/withContent";
 import withBadges from "../../../../../HOCs/withBadges";
+import { AppServerConfig } from "@appserver/common/constants";
+import { combineUrl } from "@appserver/common/utils";
+import config from "../../../../../../package.json";
 
 const sideColor = "#A3A9AE";
 
@@ -68,6 +71,9 @@ const FilesRowContent = ({
     foldersCount,
     providerKey,
     access,
+    previewUrl,
+    folderUrl,
+    id,
   } = item;
 
   const onMobileRowClick = () => {
@@ -77,6 +83,20 @@ const FilesRowContent = ({
 
   const withAccess = isAdmin || access === 0;
 
+  const docUrl = combineUrl(
+    AppServerConfig.proxyURL,
+    config.homepage,
+    `/doceditor?fileId=${id}`
+  );
+
+  const href = isTrashFolder
+    ? null
+    : previewUrl
+    ? previewUrl
+    : !item.isFolder
+    ? docUrl
+    : folderUrl;
+
   return (
     <>
       <SimpleFilesRowContent
@@ -93,6 +113,8 @@ const FilesRowContent = ({
           title={titleWithoutExt}
           fontWeight="600"
           fontSize="15px"
+          target="_blank"
+          href={href}
           {...linkStyles}
           color="#333"
           isTextOverflow

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -10,6 +10,10 @@ import TileContent from "./sub-components/TileContent";
 import withContent from "../../../../../HOCs/withContent";
 import withBadges from "../../../../../HOCs/withBadges";
 
+import { AppServerConfig } from "@appserver/common/constants";
+import { combineUrl } from "@appserver/common/utils";
+import config from "../../../../../../package.json";
+
 const SimpleFilesTileContent = styled(TileContent)`
   .row-main-container {
     height: auto;
@@ -81,13 +85,27 @@ const FilesTileContent = ({
   onFilesClick,
   badgesComponent,
 }) => {
-  const { fileExst } = item;
+  const { fileExst, previewUrl, folderUrl, id } = item;
 
   const onMobileRowClick = () => {
     if (isTrashFolder || window.innerWidth > 1024) return;
     onFilesClick();
   };
 
+  const docUrl = combineUrl(
+    AppServerConfig.proxyURL,
+    config.homepage,
+    `/doceditor?fileId=${id}`
+  );
+
+  const href = isTrashFolder
+    ? null
+    : previewUrl
+    ? previewUrl
+    : !item.isFolder
+    ? docUrl
+    : folderUrl;
+
   return (
     <>
       <SimpleFilesTileContent
@@ -103,6 +121,8 @@ const FilesTileContent = ({
           title={titleWithoutExt}
           fontWeight="600"
           fontSize="14px"
+          target="_blank"
+          href={href}
           {...linkStyles}
           color="#333"
           isTextOverflow

products/ASC.Files/Client/src/pages/Home/index.js

@@ -38,12 +38,48 @@ class PureHome extends React.Component {
       isVisitor,
       expandedKeys,
       setExpandedKeys,
+      setMediaViewerData,
     } = this.props;
 
     const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gm"); //TODO: Always find?
     const match = window.location.pathname.match(reg);
     let filterObj = null;
 
+    if (window.location.pathname.indexOf("/files/view") > 1) {
+      const search = window.location.search;
+      let id = null;
+
+      if (search.indexOf("?folder") >= 0) {
+        id = search.slice(search.indexOf("=") + 1);
+      }
+      const newLocation = JSON.parse(localStorage.getItem("location"));
+
+      filterObj = newLocation
+        ? FilesFilter.getFilter(newLocation)
+        : FilesFilter.getDefault();
+      if (isVisitor) filterObj.folder = "@common";
+      const folderId = id || filterObj.folder;
+      setIsLoading(true);
+
+      fetchFiles(folderId, filterObj)
+        .then((data) => {
+          const pathParts = data.selectedFolder.pathParts;
+          const newExpandedKeys = createTreeFolders(pathParts, expandedKeys);
+          setExpandedKeys(newExpandedKeys);
+        })
+        .finally(() => {
+          setIsLoading(false);
+          setFirstLoad(false);
+        });
+
+      if (!(search.indexOf("?folder") >= 0)) {
+        const fileId = Number(search.slice(search.indexOf("?") + 1));
+        setMediaViewerData({ visible: true, id: fileId });
+      }
+
+      return;
+    }
+
     if (match && match.length > 0) {
       filterObj = FilesFilter.getFilter(window.location);
 
@@ -311,7 +347,13 @@ class PureHome extends React.Component {
 const Home = withTranslation("Home")(PureHome);
 
 export default inject(
-  ({ auth, filesStore, uploadDataStore, treeFoldersStore }) => {
+  ({
+    auth,
+    filesStore,
+    uploadDataStore,
+    treeFoldersStore,
+    mediaViewerDataStore,
+  }) => {
     const {
       secondaryProgressDataStore,
       primaryProgressDataStore,
@@ -366,6 +408,7 @@ export default inject(
       ? filesStore.selectionTitle
       : null;
 
+    const { setMediaViewerData } = mediaViewerDataStore;
     return {
       homepage: config.homepage,
       firstLoad,
@@ -405,6 +448,7 @@ export default inject(
       startUpload,
       isHeaderVisible: auth.settingsStore.isHeaderVisible,
       setHeaderVisible: auth.settingsStore.setHeaderVisible,
+      setMediaViewerData,
     };
   }
 )(withRouter(observer(Home)));

products/ASC.Files/Client/src/store/FilesStore.js

@@ -1093,6 +1093,9 @@ class FilesStore {
         item.fileExst
       );
 
+      const previewUrl = canOpenPlayer
+        ? combineUrl(AppServerConfig.proxyURL, config.homepage, `/view?${id}`)
+        : null;
       const contextOptions = this.getFilesContextOptions(item, canOpenPlayer);
 
       //const isCanWebEdit = canWebEdit(item.fileExst);
@@ -1106,6 +1109,14 @@ class FilesStore {
         if (x.id === item.id) isFolder = true;
       });
 
+      const folderUrl = isFolder
+        ? combineUrl(
+            AppServerConfig.proxyURL,
+            config.homepage,
+            `/view?folder=${id}`
+          )
+        : null;
+
       return {
         access,
         //checked,
@@ -1144,6 +1155,8 @@ class FilesStore {
         //canShare,
         thumbnailUrl,
         thumbnailStatus,
+        previewUrl,
+        folderUrl,
       };
     });