//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from "react";
+import React from "react";
import isImage from 'is-image';
import { withStyles, WithStyles } from '@material-ui/core';
-import { FileTreeData } from '~/components/file-tree/file-tree-data';
-import { CollectionFileType } from '~/models/collection-file';
+import { FileTreeData } from 'components/file-tree/file-tree-data';
+import { CollectionFileType } from 'models/collection-file';
+import { getInlineFileUrl, sanitizeToken } from "views-components/context-menu/actions/helpers";
+import { connect } from "react-redux";
+import { RootState } from "store/store";
export interface FileThumbnailProps {
file: FileTreeData;
type ImageFileThumbnailCssRules = 'thumbnail';
-const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>({
+const imageFileThumbnailStyle = withStyles<ImageFileThumbnailCssRules>(theme => ({
thumbnail: {
maxWidth: 250,
+ margin: `${theme.spacing.unit}px 0`,
}
+}));
+
+interface ImageFileThumbnailProps {
+ keepWebServiceUrl: string;
+ keepWebInlineServiceUrl: string;
+}
+
+const mapStateToProps = ({ auth }: RootState): ImageFileThumbnailProps => ({
+ keepWebServiceUrl: auth.config.keepWebServiceUrl,
+ keepWebInlineServiceUrl: auth.config.keepWebInlineServiceUrl,
});
-const ImageFileThumbnail = imageFileThumbnailStyle(
- ({ classes, file }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps) =>
- file.type === CollectionFileType.DIRECTORY
- ? null
- : <img
- className={classes.thumbnail}
- alt={file.name} />
-);
+const ImageFileThumbnail = connect(mapStateToProps)(imageFileThumbnailStyle(
+ ({ classes, file, keepWebServiceUrl, keepWebInlineServiceUrl }: WithStyles<ImageFileThumbnailCssRules> & FileThumbnailProps & ImageFileThumbnailProps) =>
+ <img
+ className={classes.thumbnail}
+ alt={file.name}
+ src={sanitizeToken(getInlineFileUrl(file.url, keepWebServiceUrl, keepWebInlineServiceUrl))} />
+));