|
|
@ -108,16 +108,48 @@ class Item extends PureComponent { |
|
|
|
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props; |
|
|
|
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props; |
|
|
|
|
|
|
|
|
|
|
|
let badges = [], thumbnail; |
|
|
|
let badges = [], thumbnail; |
|
|
|
|
|
|
|
|
|
|
|
let width = 50; |
|
|
|
let width = 100; |
|
|
|
let height = 100; |
|
|
|
let height = 100; |
|
|
|
|
|
|
|
let top = 'auto'; |
|
|
|
if (size === 1) { |
|
|
|
let left = 'auto'; |
|
|
|
width = 100; |
|
|
|
let bottom = 'auto'; |
|
|
|
|
|
|
|
let right = 'auto'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let root = Math.sqrt(size); |
|
|
|
|
|
|
|
let numCols = Math.ceil(root); |
|
|
|
|
|
|
|
let numRows = Math.ceil(size / numCols); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let col = index % numCols; |
|
|
|
|
|
|
|
let row = Math.floor(index / numCols); |
|
|
|
|
|
|
|
if(row === numRows - 1) { |
|
|
|
|
|
|
|
width = 100 / (1 + ((size - 1) % numCols)); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
width = 100 / numCols; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
height = 100 / numRows; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(numCols > 1) { |
|
|
|
|
|
|
|
if(col === 0) { |
|
|
|
|
|
|
|
right = '2px'; |
|
|
|
|
|
|
|
} else if(col === numCols - 1) { |
|
|
|
|
|
|
|
left = '2px';; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
left = '2px'; |
|
|
|
|
|
|
|
right = '2px'; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (size === 4 || (size === 3 && index > 0)) { |
|
|
|
if(numRows > 1) { |
|
|
|
height = 50; |
|
|
|
if(row === 0) { |
|
|
|
|
|
|
|
bottom = '2px'; |
|
|
|
|
|
|
|
} else if(row === numRows - 1) { |
|
|
|
|
|
|
|
top = '2px'; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
top = '2px'; |
|
|
|
|
|
|
|
bottom = '2px'; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (attachment.get('description')?.length > 0) { |
|
|
|
if (attachment.get('description')?.length > 0) { |
|
|
@ -203,7 +235,7 @@ class Item extends PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}> |
|
|
|
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')} style={{ 'padding-left': left, 'padding-top': top, 'padding-right': right, 'padding-bottom': bottom, width: `${width}%`, height: `${height}%` }}> |
|
|
|
<Blurhash |
|
|
|
<Blurhash |
|
|
|
hash={attachment.get('blurhash')} |
|
|
|
hash={attachment.get('blurhash')} |
|
|
|
dummy={!useBlurhash} |
|
|
|
dummy={!useBlurhash} |
|
|
@ -328,7 +360,7 @@ class MediaGallery extends PureComponent { |
|
|
|
render () { |
|
|
|
render () { |
|
|
|
const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; |
|
|
|
const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; |
|
|
|
const { visible } = this.state; |
|
|
|
const { visible } = this.state; |
|
|
|
const size = media.take(4).size; |
|
|
|
const size = media.take(20).size; // Attachment limit patch |
|
|
|
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); |
|
|
|
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); |
|
|
|
|
|
|
|
|
|
|
|
const width = this.state.width || defaultWidth; |
|
|
|
const width = this.state.width || defaultWidth; |
|
|
@ -348,7 +380,7 @@ class MediaGallery extends PureComponent { |
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />; |
|
|
|
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />); |
|
|
|
children = media.take(20).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />); // Attachment limit patch |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (uncached) { |
|
|
|
if (uncached) { |
|
|
|