|
|
|
@ -101,12 +101,10 @@ class Item extends React.PureComponent { |
|
|
|
|
render () { |
|
|
|
|
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props; |
|
|
|
|
|
|
|
|
|
let badges = [], thumbnail; |
|
|
|
|
|
|
|
|
|
let width = 50; |
|
|
|
|
let height = 100; |
|
|
|
|
let top = 'auto'; |
|
|
|
|
let left = 'auto'; |
|
|
|
|
let bottom = 'auto'; |
|
|
|
|
let right = 'auto'; |
|
|
|
|
|
|
|
|
|
if (size === 1) { |
|
|
|
|
width = 100; |
|
|
|
@ -116,45 +114,13 @@ class Item extends React.PureComponent { |
|
|
|
|
height = 50; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (size === 2) { |
|
|
|
|
if (index === 0) { |
|
|
|
|
right = '2px'; |
|
|
|
|
} else { |
|
|
|
|
left = '2px'; |
|
|
|
|
} |
|
|
|
|
} else if (size === 3) { |
|
|
|
|
if (index === 0) { |
|
|
|
|
right = '2px'; |
|
|
|
|
} else if (index > 0) { |
|
|
|
|
left = '2px'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (index === 1) { |
|
|
|
|
bottom = '2px'; |
|
|
|
|
} else if (index > 1) { |
|
|
|
|
top = '2px'; |
|
|
|
|
} |
|
|
|
|
} else if (size === 4) { |
|
|
|
|
if (index === 0 || index === 2) { |
|
|
|
|
right = '2px'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (index === 1 || index === 3) { |
|
|
|
|
left = '2px'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (index < 2) { |
|
|
|
|
bottom = '2px'; |
|
|
|
|
} else { |
|
|
|
|
top = '2px'; |
|
|
|
|
} |
|
|
|
|
if (attachment.get('description')?.length > 0) { |
|
|
|
|
badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let thumbnail = ''; |
|
|
|
|
|
|
|
|
|
if (attachment.get('type') === 'unknown') { |
|
|
|
|
return ( |
|
|
|
|
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> |
|
|
|
|
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}> |
|
|
|
|
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'> |
|
|
|
|
<Blurhash |
|
|
|
|
hash={attachment.get('blurhash')} |
|
|
|
@ -205,6 +171,8 @@ class Item extends React.PureComponent { |
|
|
|
|
} else if (attachment.get('type') === 'gifv') { |
|
|
|
|
const autoPlay = this.getAutoPlay(); |
|
|
|
|
|
|
|
|
|
badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>); |
|
|
|
|
|
|
|
|
|
thumbnail = ( |
|
|
|
|
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> |
|
|
|
|
<video |
|
|
|
@ -222,14 +190,12 @@ class Item extends React.PureComponent { |
|
|
|
|
loop |
|
|
|
|
muted |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<span className='media-gallery__gifv__label'>GIF</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> |
|
|
|
|
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}> |
|
|
|
|
<Blurhash |
|
|
|
|
hash={attachment.get('blurhash')} |
|
|
|
|
dummy={!useBlurhash} |
|
|
|
@ -237,7 +203,14 @@ class Item extends React.PureComponent { |
|
|
|
|
'media-gallery__preview--hidden': visible && this.state.loaded, |
|
|
|
|
})} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
{visible && thumbnail} |
|
|
|
|
|
|
|
|
|
{badges && ( |
|
|
|
|
<div className='media-gallery__item__badges'> |
|
|
|
|
{badges} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|