Commit bce1c8d2 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza

Use only first CDN for repository images

- fixed SSR for Image Gallery  page
parent 5f26760d
......@@ -59,7 +59,7 @@ const CropImage_ = ({classes, crop, repositoryThumbnailUrl}: { classes: any, cro
let sizes: string = '';
if (image) {
for (const size of thumbSizes) {
x += repositoryThumbnailUrl(image, size, size) + ` ${size}w, `;
x += repositoryThumbnailUrl(image, size, size, true) + ` ${size}w, `;
}
sizes += `(max-width: 600px) 200px, `;
sizes += `(min-width: 1800px) 600px, `;
......@@ -73,7 +73,7 @@ const CropImage_ = ({classes, crop, repositoryThumbnailUrl}: { classes: any, cro
{ hasCover &&
<span>
<img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
src={ repositoryThumbnailUrl(image, 300, 300) } alt={ crop.name } />
src={ repositoryThumbnailUrl(image, 300, 300, true) } alt={ crop.name } />
<ImageDetailsDialog image={ image }/>
</span>
}
......
......@@ -4,11 +4,11 @@ import RepositoryImage from 'model/repository/RepositoryImage';
/**
* Pick a random CDN server if available
*/
function getCDNServer(getState) {
function getCDNServer(getState, first?: boolean) {
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';
return cdnServers[first ? 0 : Math.round((cdnServers.length - 1) * Math.random())] + '/repository/d';
} else {
return '/proxy/uploads/d';
}
......@@ -17,14 +17,15 @@ function getCDNServer(getState) {
/**
* Renders CDN-based URL for public files, API URL for protected files
*
* @param first to use first only CDN
* @param file RepositoryFile for which to render URL
*/
export const repositoryDownloadUrl = (file: RepositoryFile) => (dispatch, getState) => {
export const repositoryDownloadUrl = (file: RepositoryFile, first?: boolean) => (dispatch, getState) => {
if (! file) {
return null;
}
if (file._permissions && file._permissions.isPublic) {
return getCDNServer(getState) + `${file.storagePath}`;
return getCDNServer(getState, first) + `${file.storagePath}`;
} else {
return '/proxy/uploads/d' + `${file.storagePath}`;
}
......@@ -34,14 +35,17 @@ export const repositoryDownloadUrl = (file: RepositoryFile) => (dispatch, getSta
/**
* Renders CDN-based URL for public images, API URL for protected images
*
* @param width width of image
* @param height height of image
* @param first to use first only CDN
* @param image RepositoryImage for which to render thumbnail URL
*/
export const repositoryThumbnailUrl = (image: RepositoryImage, width: number, height: number) => (dispatch, getState) => {
export const repositoryThumbnailUrl = (image: RepositoryImage, width: number, height: number, first?: boolean) => (dispatch, getState) => {
if (! image) {
return null;
}
if (image._permissions && image._permissions.isPublic) {
return getCDNServer(getState) + `/_thumbs${image.thumbnailPath}/${width}x${height}.png`;
return getCDNServer(getState, first) + `/_thumbs${image.thumbnailPath}/${width}x${height}.png`;
} else {
return '/proxy/uploads/d' + `/_thumbs${image.thumbnailPath}/${width}x${height}.png`;
}
......
......@@ -45,7 +45,7 @@ const styles = (theme) => ({
class ImageGalleryPage extends React.Component<IRepositoryBrowserProps, any> {
protected static needs = [
({ root, path }) => getGallery(normalize(root + path).replace(/^(.+)\/$/, '$1')),
({ ownProps: { route: { root }}, params: { path } }) => getGallery(normalize(root + path).replace(/^(.+)\/$/, '$1')),
];
public constructor(props: any) {
......
......@@ -56,7 +56,7 @@ const ImageGalleryView = (
<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={ repositoryThumbnailUrl(image, 200, 200) } title={ image.title || image.orientation } />
<CardMedia className={ classes.media } image={ repositoryThumbnailUrl(image, 200, 200, true) } title={ image.title || image.orientation } />
<ImageDetailsDialog image={ image }/>
</span>
<CardContent>
......
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