Skip to content

Commit

Permalink
Merge pull request #677 from ONLYOFFICE/feature/multiply-thumb
Browse files Browse the repository at this point in the history 
Feature/multiply thumb
  • Loading branch information
@AlexeySafronov
AlexeySafronov authored May 24, 2022
2 parents f9f36e9 + ea4b14a commit 10b8f3a
Show file tree
Hide file tree
Showing 22 changed files with 474 additions and 199 deletions.
54 changes: 52 additions & 2 deletions config/appsettings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,57 @@
"enabled": "true"
},
"thumbnail": {
"thumbnaillHeight": 260,
"thumbnaillWidth": 360
"sizes" :
[
{
"height": 260,
"width": 360
},
{
"height": 300,
"width": 216
},
{
"height": 300,
"width": 240
},
{
"height": 300,
"width": 264
},
{
"height": 300,
"width": 288
},
{
"height": 300,
"width": 312
},
{
"height": 300,
"width": 336
},
{
"height": 300,
"width": 360
},
{
"height": 300,
"width": 280
},
{
"height": 300,
"width": 320
},
{
"height": 300,
"width": 400
},
{
"height": 300,
"width": 440
},

]
}
}
1 change: 1 addition & 0 deletions products/ASC.Files/Client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,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",
Expand Down
4 changes: 2 additions & 2 deletions products/ASC.Files/Client/src/pages/FormGallery/TilesView/StyledTileView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ const StyledFileTileTop = styled.div`
.thumbnail-image {
pointer-events: none;
position: relative;
/* height: 100%;
height: 100%;
width: 100%;
object-fit: cover; */
object-fit: cover;
border-radius: 6px 6px 0 0;
z-index: 0;
}
Expand Down
7 changes: 6 additions & 1 deletion products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const FileTile = (props) => {
t,
getContextModel,
onHideContextMenu,
thumbSize,
} = props;

const temporaryExtension =
Expand Down Expand Up @@ -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}
Expand Down
88 changes: 80 additions & 8 deletions products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,70 @@
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, filesList]);

const onResize = useCallback(() => {
const { width } = firstRef.current.getBoundingClientRect();

const size = getThumbSize(width);

console.log(
`Body width: ${document.body.clientWidth} Tile width: ${width} ThumbSize: ${size}`
);

if (size === thumbSize) return;

setThumbSize(size);
}, [firstRef]);

return (
<TileContainer
className="tile-container"
Expand All @@ -12,13 +73,24 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => {
headingFolders={t("Folders")}
headingFiles={t("Files")}
>
{filesList.map((item, index) => (
<FileTile
key={`${item.id}_${index}`}
item={item}
sectionWidth={sectionWidth}
/>
))}
{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>
);
};
Expand Down
2 changes: 1 addition & 1 deletion products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions products/ASC.Files/Core/Core/Dao/Interfaces/IFileDao.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,9 +292,9 @@ public interface IFileDao<T>

Task<bool> ContainChangesAsync(T fileId, int fileVersion);

Task SaveThumbnailAsync(File<T> file, Stream thumbnail);
Task SaveThumbnailAsync(File<T> file, Stream thumbnail, int width, int height);

Task<Stream> GetThumbnailAsync(File<T> file);
Task<Stream> GetThumbnailAsync(File<T> file, int width, int height);

Task<IEnumerable<(File<int>, SmallShareRecord)>> GetFeedsAsync(int tenant, DateTime from, DateTime to);

Expand Down
36 changes: 24 additions & 12 deletions products/ASC.Files/Core/Core/Dao/TeamlabDao/FileDao.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ namespace ASC.Files.Core.Data
internal class FileDao : AbstractDao, IFileDao<int>
{
private static readonly object syncRoot = new object();
private readonly ThumbnailSettings _thumbnailSettings;

private FactoryIndexerFile FactoryIndexer { get; }
private GlobalStore GlobalStore { get; }
private GlobalSpace GlobalSpace { get; }
Expand Down Expand Up @@ -98,7 +100,8 @@ public FileDao(
ChunkedUploadSessionHolder chunkedUploadSessionHolder,
ProviderFolderDao providerFolderDao,
CrossDao crossDao,
Settings settings)
Settings settings,
ThumbnailSettings thumbnailSettings)
: base(
dbContextManager,
userManager,
Expand All @@ -124,6 +127,7 @@ public FileDao(
ProviderFolderDao = providerFolderDao;
CrossDao = crossDao;
Settings = settings;
_thumbnailSettings = thumbnailSettings;
}

public Task InvalidateCacheAsync(int fileId)
Expand Down Expand Up @@ -881,19 +885,22 @@ public async Task<File<int>> CopyFileAsync(int fileId, int toFolderId)
copy.Comment = FilesCommonResource.CommentCopy;
copy.Encrypted = file.Encrypted;

using (var stream = await GetFileStreamAsync(file).ConfigureAwait(false))
using (var stream = await GetFileStreamAsync(file))
{
copy.ContentLength = stream.CanSeek ? stream.Length : file.ContentLength;
copy = await SaveFileAsync(copy, stream).ConfigureAwait(false);
}

if (file.ThumbnailStatus == Thumbnail.Created)
{
using (var thumbnail = await GetThumbnailAsync(file).ConfigureAwait(false))
foreach (var size in _thumbnailSettings.Sizes)
{
await SaveThumbnailAsync(copy, thumbnail).ConfigureAwait(false);
using (var thumbnail = await GetThumbnailAsync(file, size.Width, size.Height))
{
await SaveThumbnailAsync(copy, thumbnail, size.Width, size.Height);
}
copy.ThumbnailStatus = Thumbnail.Created;
}
copy.ThumbnailStatus = Thumbnail.Created;
}

return copy;
Expand Down Expand Up @@ -1351,14 +1358,14 @@ public async Task<IEnumerable<int>> GetTenantsWithFeedsAsync(DateTime fromTime)

private const string ThumbnailTitle = "thumb";

public Task SaveThumbnailAsync(File<int> file, Stream thumbnail)
public Task SaveThumbnailAsync(File<int> file, Stream thumbnail, int width, int height)
{
if (file == null) throw new ArgumentNullException(nameof(file));

return InternalSaveThumbnailAsync(file, thumbnail);
return InternalSaveThumbnailAsync(file, thumbnail, width, height);
}

private async Task InternalSaveThumbnailAsync(File<int> file, Stream thumbnail)
private async Task InternalSaveThumbnailAsync(File<int> file, Stream thumbnail, int width, int height)
{
var toUpdate = await FilesDbContext.Files
.AsQueryable()
Expand All @@ -1373,20 +1380,25 @@ private async Task InternalSaveThumbnailAsync(File<int> file, Stream thumbnail)

if (thumbnail == null) return;

var thumnailName = ThumbnailTitle + "." + Global.ThumbnailExtension;
var thumnailName = GetThumnailName(width, height);
await GlobalStore.GetStore().SaveAsync(string.Empty, GetUniqFilePath(file, thumnailName), thumbnail, thumnailName);
}

public async Task<Stream> GetThumbnailAsync(File<int> file)
public async Task<Stream> GetThumbnailAsync(File<int> file, int width, int height)
{
var thumnailName = ThumbnailTitle + "." + Global.ThumbnailExtension;
var thumnailName = GetThumnailName(width, height);
var path = GetUniqFilePath(file, thumnailName);
var storage = GlobalStore.GetStore();
var isFile = await storage.IsFileAsync(string.Empty, path).ConfigureAwait(false);
if (!isFile) throw new FileNotFoundException();
return await storage.GetReadStreamAsync(string.Empty, path, 0).ConfigureAwait(false);
}

private string GetThumnailName(int width, int height)
{
return $"{ThumbnailTitle}.{width}x{height}.{Global.ThumbnailExtension}";
}

#endregion

private Func<Selector<DbFile>, Selector<DbFile>> GetFuncForSearch(object parentId, OrderBy orderBy, FilterType filterType, bool subjectGroup, Guid subjectID, string searchText, bool searchInContent, bool withSubfolders = false)
Expand Down Expand Up @@ -1555,7 +1567,7 @@ public File<int> ToFile(DbFileQuery r)
return (file, record);
}

internal protected Task<DbFile> InitDocumentAsync(DbFile dbFile)
protected internal Task<DbFile> InitDocumentAsync(DbFile dbFile)
{
if (!FactoryIndexer.CanIndexByContent(dbFile))
{
Expand Down
Loading

0 comments on commit 10b8f3a

Please sign in to comment.