The code powering m.abunchtell.com https://m.abunchtell.com
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

284 řádky
7.7 KiB

  1. import React from 'react';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import PropTypes from 'prop-types';
  4. import { is } from 'immutable';
  5. import IconButton from './icon_button';
  6. import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  7. import { isIOS } from '../is_mobile';
  8. import classNames from 'classnames';
  9. import { autoPlayGif, displaySensitiveMedia } from '../initial_state';
  10. const messages = defineMessages({
  11. toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
  12. });
  13. class Item extends React.PureComponent {
  14. static propTypes = {
  15. attachment: ImmutablePropTypes.map.isRequired,
  16. standalone: PropTypes.bool,
  17. index: PropTypes.number.isRequired,
  18. size: PropTypes.number.isRequired,
  19. onClick: PropTypes.func.isRequired,
  20. };
  21. static defaultProps = {
  22. standalone: false,
  23. index: 0,
  24. size: 1,
  25. };
  26. handleMouseEnter = (e) => {
  27. if (this.hoverToPlay()) {
  28. e.target.play();
  29. }
  30. }
  31. handleMouseLeave = (e) => {
  32. if (this.hoverToPlay()) {
  33. e.target.pause();
  34. e.target.currentTime = 0;
  35. }
  36. }
  37. hoverToPlay () {
  38. const { attachment } = this.props;
  39. return !autoPlayGif && attachment.get('type') === 'gifv';
  40. }
  41. handleClick = (e) => {
  42. const { index, onClick } = this.props;
  43. if (e.button === 0) {
  44. e.preventDefault();
  45. onClick(index);
  46. }
  47. e.stopPropagation();
  48. }
  49. render () {
  50. const { attachment, index, size, standalone } = this.props;
  51. let width = 50;
  52. let height = 100;
  53. let top = 'auto';
  54. let left = 'auto';
  55. let bottom = 'auto';
  56. let right = 'auto';
  57. if (size === 1) {
  58. width = 100;
  59. }
  60. if (size === 4 || (size === 3 && index > 0)) {
  61. height = 50;
  62. }
  63. if (size === 2) {
  64. if (index === 0) {
  65. right = '2px';
  66. } else {
  67. left = '2px';
  68. }
  69. } else if (size === 3) {
  70. if (index === 0) {
  71. right = '2px';
  72. } else if (index > 0) {
  73. left = '2px';
  74. }
  75. if (index === 1) {
  76. bottom = '2px';
  77. } else if (index > 1) {
  78. top = '2px';
  79. }
  80. } else if (size === 4) {
  81. if (index === 0 || index === 2) {
  82. right = '2px';
  83. }
  84. if (index === 1 || index === 3) {
  85. left = '2px';
  86. }
  87. if (index < 2) {
  88. bottom = '2px';
  89. } else {
  90. top = '2px';
  91. }
  92. }
  93. let thumbnail = '';
  94. if (attachment.get('type') === 'image') {
  95. const previewUrl = attachment.get('preview_url');
  96. const previewWidth = attachment.getIn(['meta', 'small', 'width']);
  97. const originalUrl = attachment.get('url');
  98. const originalWidth = attachment.getIn(['meta', 'original', 'width']);
  99. const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
  100. const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
  101. const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null;
  102. const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
  103. const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
  104. const x = ((focusX / 2) + .5) * 100;
  105. const y = ((focusY / -2) + .5) * 100;
  106. thumbnail = (
  107. <a
  108. className='media-gallery__item-thumbnail'
  109. href={attachment.get('remote_url') || originalUrl}
  110. onClick={this.handleClick}
  111. target='_blank'
  112. >
  113. <img
  114. src={previewUrl}
  115. srcSet={srcSet}
  116. sizes={sizes}
  117. alt={attachment.get('description')}
  118. title={attachment.get('description')}
  119. style={{ objectPosition: `${x}% ${y}%` }}
  120. />
  121. </a>
  122. );
  123. } else if (attachment.get('type') === 'gifv') {
  124. const autoPlay = !isIOS() && autoPlayGif;
  125. thumbnail = (
  126. <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
  127. <video
  128. className='media-gallery__item-gifv-thumbnail'
  129. aria-label={attachment.get('description')}
  130. role='application'
  131. src={attachment.get('url')}
  132. onClick={this.handleClick}
  133. onMouseEnter={this.handleMouseEnter}
  134. onMouseLeave={this.handleMouseLeave}
  135. autoPlay={autoPlay}
  136. loop
  137. muted
  138. />
  139. <span className='media-gallery__gifv__label'>GIF</span>
  140. </div>
  141. );
  142. }
  143. return (
  144. <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
  145. {thumbnail}
  146. </div>
  147. );
  148. }
  149. }
  150. @injectIntl
  151. export default class MediaGallery extends React.PureComponent {
  152. static propTypes = {
  153. sensitive: PropTypes.bool,
  154. standalone: PropTypes.bool,
  155. media: ImmutablePropTypes.list.isRequired,
  156. size: PropTypes.object,
  157. height: PropTypes.number.isRequired,
  158. onOpenMedia: PropTypes.func.isRequired,
  159. intl: PropTypes.object.isRequired,
  160. };
  161. static defaultProps = {
  162. standalone: false,
  163. };
  164. state = {
  165. visible: !this.props.sensitive || displaySensitiveMedia,
  166. };
  167. componentWillReceiveProps (nextProps) {
  168. if (!is(nextProps.media, this.props.media)) {
  169. this.setState({ visible: !nextProps.sensitive });
  170. }
  171. }
  172. handleOpen = () => {
  173. this.setState({ visible: !this.state.visible });
  174. }
  175. handleClick = (index) => {
  176. this.props.onOpenMedia(this.props.media, index);
  177. }
  178. handleRef = (node) => {
  179. if (node /*&& this.isStandaloneEligible()*/) {
  180. // offsetWidth triggers a layout, so only calculate when we need to
  181. this.setState({
  182. width: node.offsetWidth,
  183. });
  184. }
  185. }
  186. isStandaloneEligible() {
  187. const { media, standalone } = this.props;
  188. return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
  189. }
  190. render () {
  191. const { media, intl, sensitive, height } = this.props;
  192. const { width, visible } = this.state;
  193. let children;
  194. const style = {};
  195. if (this.isStandaloneEligible()) {
  196. if (width) {
  197. style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
  198. }
  199. } else if (width) {
  200. style.height = width / (16/9);
  201. } else {
  202. style.height = height;
  203. }
  204. if (!visible) {
  205. let warning;
  206. if (sensitive) {
  207. warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
  208. } else {
  209. warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
  210. }
  211. children = (
  212. <button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
  213. <span className='media-spoiler__warning'>{warning}</span>
  214. <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
  215. </button>
  216. );
  217. } else {
  218. const size = media.take(4).size;
  219. if (this.isStandaloneEligible()) {
  220. children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
  221. } else {
  222. children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} />);
  223. }
  224. }
  225. return (
  226. <div className='media-gallery' style={style} ref={this.handleRef}>
  227. <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
  228. <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
  229. </div>
  230. {children}
  231. </div>
  232. );
  233. }
  234. }