diff options
author | Renaud Chaput <renchap@gmail.com> | 2023-02-25 14:34:32 +0100 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2023-02-25 14:35:31 +0100 |
commit | 81ef21a0c802f1d905f37a2a818544a8b400793c (patch) | |
tree | 33043286868ca9efb627ed38accab03c756adbcb /app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | |
parent | 859eb01aacc27fa01a8d4063f26a5a1f81e5d3a9 (diff) |
[Glitch] Rename JSX files with proper `.jsx` extension
Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/account_gallery/components/media_item.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | 146 |
1 files changed, 0 insertions, 146 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 deleted file mode 100644 index d169875b0..000000000 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ /dev/null @@ -1,146 +0,0 @@ -import Blurhash from 'flavours/glitch/components/blurhash'; -import classNames from 'classnames'; -import Icon from 'flavours/glitch/components/icon'; -import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state'; -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -export default class MediaItem extends ImmutablePureComponent { - - static propTypes = { - attachment: ImmutablePropTypes.map.isRequired, - displayWidth: PropTypes.number.isRequired, - onOpenMedia: PropTypes.func.isRequired, - }; - - state = { - visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all', - loaded: false, - }; - - handleImageLoad = () => { - this.setState({ loaded: true }); - }; - - handleMouseEnter = e => { - if (this.hoverToPlay()) { - e.target.play(); - } - }; - - handleMouseLeave = e => { - if (this.hoverToPlay()) { - e.target.pause(); - e.target.currentTime = 0; - } - }; - - hoverToPlay () { - return !autoPlayGif && ['gifv', 'video'].indexOf(this.props.attachment.get('type')) !== -1; - } - - handleClick = e => { - if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { - e.preventDefault(); - - if (this.state.visible) { - this.props.onOpenMedia(this.props.attachment); - } else { - this.setState({ visible: true }); - } - } - }; - - render () { - const { attachment, displayWidth } = this.props; - const { visible, loaded } = this.state; - - const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; - const height = width; - const status = attachment.get('status'); - const title = status.get('spoiler_text') || attachment.get('description'); - - let thumbnail, label, icon, content; - - if (!visible) { - icon = ( - <span className='account-gallery__item__icons'> - <Icon id='eye-slash' /> - </span> - ); - } else { - if (['audio', 'video'].includes(attachment.get('type'))) { - content = ( - <img - src={attachment.get('preview_url') || attachment.getIn(['account', 'avatar_static'])} - alt={attachment.get('description')} - onLoad={this.handleImageLoad} - /> - ); - - if (attachment.get('type') === 'audio') { - label = <Icon id='music' />; - } else { - label = <Icon id='play' />; - } - } else if (attachment.get('type') === 'image') { - const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; - const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; - const x = ((focusX / 2) + .5) * 100; - const y = ((focusY / -2) + .5) * 100; - - content = ( - <img - src={attachment.get('preview_url')} - alt={attachment.get('description')} - style={{ objectPosition: `${x}% ${y}%` }} - onLoad={this.handleImageLoad} - /> - ); - } else if (attachment.get('type') === 'gifv') { - content = ( - <video - className='media-gallery__item-gifv-thumbnail' - aria-label={attachment.get('description')} - title={attachment.get('description')} - role='application' - src={attachment.get('url')} - onMouseEnter={this.handleMouseEnter} - onMouseLeave={this.handleMouseLeave} - autoPlay={autoPlayGif} - playsInline - loop - muted - /> - ); - - label = 'GIF'; - } - - thumbnail = ( - <div className='media-gallery__gifv'> - {content} - - {label && <span className='media-gallery__gifv__label'>{label}</span>} - </div> - ); - } - - return ( - <div className='account-gallery__item' style={{ width, height }}> - <a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'> - <Blurhash - hash={attachment.get('blurhash')} - className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} - dummy={!useBlurhash} - /> - - {visible ? thumbnail : icon} - </a> - </div> - ); - } - -} |