Commit 8eabe047 authored by Matija Obreza's avatar Matija Obreza
Browse files

Use CDN for public files and images

parent a5134f4f
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import { translate } from 'react-i18next';
import { repositoryThumbnailUrl } from 'repository/actions/public';
// Models
import CropDetails from 'model/genesys/CropDetails';
......@@ -45,7 +49,7 @@ const style = (theme) => ({
},
});
const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
const CropImage_ = ({classes, crop, repositoryThumbnailUrl}: { classes: any, crop: CropDetails, repositoryThumbnailUrl: any}) => {
// console.log(`renderImage`, crop);
const hasCover = crop.covers && crop.covers.length > 0;
const image = hasCover ? crop.covers[0] : null;
......@@ -55,7 +59,7 @@ const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
let sizes: string = '';
if (image) {
for (const size of thumbSizes) {
x += `/proxy/uploads/d/_thumbs${image.thumbnailPath}/${size}x${size}.png ${size}w, `;
x += repositoryThumbnailUrl(image, size, size) + ` ${size}w, `;
}
sizes += `(max-width: 600px) 200px, `;
sizes += `(min-width: 1800px) 600px, `;
......@@ -69,7 +73,7 @@ const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
{ hasCover &&
<span>
<img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
src={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/300x300.png` } alt={ crop.name } />
src={ repositoryThumbnailUrl(image, 300, 300) } alt={ crop.name } />
<ImageDetailsDialog image={ image }/>
</span>
}
......@@ -83,6 +87,13 @@ const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
);
};
const mapDispatchToProps = (dispatch) => bindActionCreators({
repositoryThumbnailUrl,
}, dispatch);
const CropImage = connect(null, mapDispatchToProps)(CropImage_);
const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean, t: any }) => {
if (!crop) {
return null;
......
import RepositoryFile from 'model/repository/RepositoryFile';
import RepositoryImage from 'model/repository/RepositoryImage';
/**
* Pick a random CDN server if available
*/
function getCDNServer(getState) {
const apiInfo = getState().serverInfo.data;
if (apiInfo && apiInfo.cdnServers && apiInfo.cdnServers.length > 0) {
const cdnServers = apiInfo.cdnServers;
return cdnServers[Math.round((cdnServers.length - 1) * Math.random())] + '/repository/d';
} else {
return '/proxy/uploads/d';
}
}
/**
* Renders CDN-based URL for public files, API URL for protected files
*
* @param file RepositoryFile for which to render URL
*/
export const repositoryDownloadUrl = (file: RepositoryFile) => (dispatch, getState) => {
if (! file) {
return null;
}
if (file._permissions && file._permissions.isPublic) {
return getCDNServer(getState) + `/${file.uuid}`;
} else {
return '/proxy/uploads/d' + `/${file.uuid}`;
}
};
/**
* Renders CDN-based URL for public images, API URL for protected images
*
* @param image RepositoryImage for which to render thumbnail URL
*/
export const repositoryThumbnailUrl = (image: RepositoryImage, width: number, height: number) => (dispatch, getState) => {
if (! image) {
return null;
}
if (image._permissions && image._permissions.isPublic) {
return getCDNServer(getState) + `/_thumbs${image.thumbnailPath}/${width}x${height}.png`;
} else {
return '/proxy/uploads/d' + `/_thumbs${image.thumbnailPath}/${width}x${height}.png`;
}
};
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { repositoryDownloadUrl } from 'repository/actions/public';
// Models
import RepositoryFile from 'model/repository/RepositoryFile';
......@@ -74,8 +78,8 @@ const style = (theme) => ({
});
/*tslint:enable*/
const FileCard = ({file, classes, compact = false, edit = false, deleteFile, editFile, t, ...other}:
{ file: RepositoryFile, classes?: any, compact?: boolean, edit?: boolean, deleteFile: (uuid: string) => any, editFile: (uuid: string) => any, t: any }) => {
const FileCard = ({file, classes, compact = false, edit = false, deleteFile, editFile, t, repositoryDownloadUrl, ...other}:
{ file: RepositoryFile, classes?: any, compact?: boolean, edit?: boolean, deleteFile: (uuid: string) => any, editFile: (uuid: string) => any, t: any, repositoryDownloadUrl: any }) => {
if (!file) {
return null;
......@@ -94,7 +98,7 @@ const FileCard = ({file, classes, compact = false, edit = false, deleteFile, edi
return compact ? (
<Grid item xs={ 12 }>
<Card className={ classes.root }>
<CardHeader title={ <a href={ `/proxy/uploads/${file.uuid}` }>{ file.originalFilename }</a> } />
<CardHeader title={ <a href={ repositoryDownloadUrl(file) }>{ file.originalFilename }</a> } />
<CardContent>
{ file.storageFolder }
</CardContent>
......@@ -106,7 +110,7 @@ const FileCard = ({file, classes, compact = false, edit = false, deleteFile, edi
<Grid item xs={ 12 }>
<Card className={ classes.root }>
<CardHeader className={ classes.header }
title={ <span><a href={ `/proxy/uploads/${file.uuid}` }><DownloadIcon /></a> <span>{ file.originalFilename }</span></span> }
title={ <span><a href={ repositoryDownloadUrl(file) }><DownloadIcon /></a> <span>{ file.originalFilename }</span></span> }
action={
<div className={ classes.actions }>
<span><ActionButton action={ () => editFile(file.uuid) } title={ t('common:action.edit') } /></span>
......@@ -127,4 +131,8 @@ const FileCard = ({file, classes, compact = false, edit = false, deleteFile, edi
);
};
export default translate()(withStyles(style)(FileCard));
const mapDispatchToProps = (dispatch) => bindActionCreators({
repositoryDownloadUrl,
}, dispatch);
export default connect(null, mapDispatchToProps)(translate()(withStyles(style)(FileCard)));
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { repositoryThumbnailUrl } from 'repository/actions/public';
// Models
import ImageGallery from 'model/repository/ImageGallery';
......@@ -26,7 +30,10 @@ const style = (theme) => ({
},
});
const ImageGalleryView = ({imageGallery, classes, className, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, className?: string, classes?: any, compact?: boolean, edit?: boolean }) => {
const ImageGalleryView = (
{ imageGallery, repositoryThumbnailUrl, classes, className, compact = false, edit = false, ...other }:
{ imageGallery: ImageGallery, repositoryThumbnailUrl: any, className?: string, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!imageGallery) {
return null;
}
......@@ -49,7 +56,7 @@ const ImageGalleryView = ({imageGallery, classes, className, compact = false, ed
<Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
<Card className={ classes.root }>
<span className={ classes.mediaContent }>
<CardMedia className={ classes.media } image={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png` } title={ image.title || image.orientation } />
<CardMedia className={ classes.media } image={ repositoryThumbnailUrl(image, 200, 200) } title={ image.title || image.orientation } />
<ImageDetailsDialog image={ image }/>
</span>
<CardContent>
......@@ -74,4 +81,8 @@ const ImageGalleryView = ({imageGallery, classes, className, compact = false, ed
// </Grid>
};
export default withStyles(style)(ImageGalleryView);
const mapDispatchToProps = (dispatch) => bindActionCreators({
repositoryThumbnailUrl,
}, dispatch);
export default connect(null, mapDispatchToProps)(withStyles(style)(ImageGalleryView));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment