diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/account_gallery/components')
-rw-r--r-- | app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | 25 |
1 files changed, 17 insertions, 8 deletions
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js index 026136b2c..f1cb3f9e4 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js @@ -1,11 +1,12 @@ -import React from 'react'; +import { decode } from 'blurhash'; +import classNames from 'classnames'; +import Icon from 'flavours/glitch/components/icon'; +import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; +import { isIOS } from 'flavours/glitch/util/is_mobile'; import PropTypes from 'prop-types'; +import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; -import classNames from 'classnames'; -import { decode } from 'blurhash'; -import { isIOS } from 'flavours/glitch/util/is_mobile'; export default class MediaItem extends ImmutablePureComponent { @@ -94,6 +95,12 @@ export default class MediaItem extends ImmutablePureComponent { if (attachment.get('type') === 'unknown') { // Skip + } else if (attachment.get('type') === 'audio') { + thumbnail = ( + <span className='account-gallery__item__icons'> + <Icon id='music' /> + </span> + ); } else if (attachment.get('type') === 'image') { const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; @@ -111,6 +118,7 @@ export default class MediaItem extends ImmutablePureComponent { ); } else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) { const autoPlay = !isIOS() && autoPlayGif; + const label = attachment.get('type') === 'video' ? <Icon id='play' /> : 'GIF'; thumbnail = ( <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> @@ -126,20 +134,21 @@ export default class MediaItem extends ImmutablePureComponent { loop muted /> - <span className='media-gallery__gifv__label'>GIF</span> + + <span className='media-gallery__gifv__label'>{label}</span> </div> ); } const icon = ( <span className='account-gallery__item__icons'> - <i className='fa fa-eye-slash' /> + <Icon id='eye-slash' /> </span> ); return ( <div className='account-gallery__item' style={{ width, height }}> - <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={this.handleClick} title={title}> + <a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'> <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} /> {visible ? thumbnail : icon} </a> |