Web: Files: Applied changes of new thumbnail sizes

config/appsettings.json

@@ -171,48 +171,48 @@
 				"width": 360
 			},
 			{
-				"height": 216,
-				"width": 300
+				"height": 300,
+				"width": 216
 			},
 			{
-				"height": 240,
-				"width": 300
+				"height": 300,
+				"width": 240
 			},
 			{
-				"height": 264,
-				"width": 300
+				"height": 300,
+				"width": 264
 			},
 			{
-				"height": 288,
-				"width": 300
+				"height": 300,
+				"width": 288
 			},
 			{
-				"height": 312,
-				"width": 300
+				"height": 300,
+				"width": 312
 			},
 			{
-				"height": 336,
-				"width": 300
+				"height": 300,
+				"width": 336
 			},
 			{
-				"height": 360,
-				"width": 300
+				"height": 300,
+				"width": 360
 			},
 			{
-				"height": 280,
-				"width": 300
+				"height": 300,
+				"width": 280
 			},
 			{
-				"height": 320,
-				"width": 300
+				"height": 300,
+				"width": 320
 			},
 			{
-				"height": 400,
-				"width": 300
+				"height": 300,
+				"width": 400
 			},
 			{
-				"height": 440,
-				"width": 300
+				"height": 300,
+				"width": 440
 			},
 			
 		]

products/ASC.Files/Client/package.json

@@ -60,6 +60,7 @@
     "codeceptjs-resemblehelper": "^1.9.5",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
+    "element-resize-detector": "^1.2.4",
     "external-remotes-plugin": "^1.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "5.3.2",

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

@@ -39,6 +39,7 @@ const FileTile = (props) => {
     t,
     getContextModel,
     onHideContextMenu,
+    thumbSize,
   } = props;
 
   const temporaryExtension =
@@ -71,7 +72,11 @@ const FileTile = (props) => {
           key={item.id}
           item={item}
           temporaryIcon={temporaryIcon}
-          thumbnail={thumbnailUrl}
+          thumbnail={
+            thumbnailUrl && thumbSize
+              ? `${thumbnailUrl}&size=${thumbSize}`
+              : thumbnailUrl
+          }
           element={element}
           sectionWidth={sectionWidth}
           contentElement={quickButtonsComponent}

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

@@ -1,9 +1,68 @@
-import React from "react";
+import React, { useEffect, useRef, useCallback, useState } from "react";
 import { inject, observer } from "mobx-react";
+import elementResizeDetectorMaker from "element-resize-detector";
 import TileContainer from "./sub-components/TileContainer";
 import FileTile from "./FileTile";
 
+const getThumbSize = (width) => {
+  let imgWidth = 216;
+
+  if (width >= 240 && width < 264) {
+    imgWidth = 240;
+  } else if (width >= 264 && width < 288) {
+    imgWidth = 264;
+  } else if (width >= 288 && width < 312) {
+    imgWidth = 288;
+  } else if (width >= 312 && width < 336) {
+    imgWidth = 312;
+  } else if (width >= 336 && width < 360) {
+    imgWidth = 336;
+  } else if (width >= 360 && width < 400) {
+    imgWidth = 360;
+  } else if (width >= 400 && width < 440) {
+    imgWidth = 400;
+  } else if (width >= 440) {
+    imgWidth = 440;
+  }
+
+  return `${imgWidth}x300`;
+};
+
 const FilesTileContainer = ({ filesList, t, sectionWidth }) => {
+  const firstRef = useRef();
+  const [thumbSize, setThumbSize] = useState("");
+
+  useEffect(() => {
+    if (!firstRef?.current) return;
+
+    onResize();
+
+    const elementResizeDetector = elementResizeDetectorMaker({
+      strategy: "scroll",
+      callOnAdd: false,
+    });
+
+    elementResizeDetector.listenTo(firstRef.current, onResize);
+
+    return () => {
+      if (!firstRef?.current) return;
+
+      elementResizeDetector.uninstall(firstRef.current);
+    };
+  }, [firstRef]);
+
+  const onResize = useCallback(() => {
+    const { width } = firstRef.current.getBoundingClientRect();
+
+    const size = getThumbSize(width);
+
+    console.log(
+      `Body width: ${document.body.clientWidth} Tile width: ${width} ThumbSize: ${size}`
+    );
+
+    setThumbSize(size);
+  }, [firstRef]);
+
   return (
     <TileContainer
       className="tile-container"
@@ -12,13 +71,24 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => {
       headingFolders={t("Folders")}
       headingFiles={t("Files")}
     >
-      {filesList.map((item, index) => (
+      {filesList.map((item, index) => {
+        return index == 0 ? (
           <FileTile
             key={`${item.id}_${index}`}
             item={item}
             sectionWidth={sectionWidth}
+            selectableRef={firstRef}
+            thumbSize={thumbSize}
           />
-      ))}
+        ) : (
+          <FileTile
+            key={`${item.id}_${index}`}
+            item={item}
+            sectionWidth={sectionWidth}
+            thumbSize={thumbSize}
+          />
+        );
+      })}
     </TileContainer>
   );
 };

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -169,7 +169,7 @@ const StyledFileTileTop = styled.div`
     position: absolute;
     height: 100%;
     width: 100%;
-    object-fit: cover;
+    object-fit: ${(props) => (props.isMedia ? "cover" : "none")};
     object-position: top;
     z-index: 0;
     border-radius: 6px 6px 0 0;

yarn.lock

@@ -8874,7 +8874,7 @@ electron@^12.0.4:
     "@types/node" "^14.6.2"
     extract-zip "^1.0.3"
 
-element-resize-detector@^1.2.2:
+element-resize-detector@^1.2.2, element-resize-detector@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
   integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==