Web: Files: Applied changes of new thumbnail sizes
This commit is contained in:
parent
f8a4a7cf7c
commit
f2ede4c62c
@ -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
|
||||
},
|
||||
|
||||
]
|
||||
|
@ -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",
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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==
|
||||
|
Loading…
Reference in New Issue
Block a user