import React from 'react'; import PropTypes from 'prop-types'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import punycode from 'punycode'; import classnames from 'classnames'; import Icon from 'mastodon/components/icon'; import { useBlurhash } from 'mastodon/initial_state'; import Blurhash from 'mastodon/components/blurhash'; const IDNA_PREFIX = 'xn--'; const decodeIDNA = domain => { return domain .split('.') .map(part => part.indexOf(IDNA_PREFIX) === 0 ? punycode.decode(part.slice(IDNA_PREFIX.length)) : part) .join('.'); }; const getHostname = url => { const parser = document.createElement('a'); parser.href = url; return parser.hostname; }; const domParser = new DOMParser(); const addAutoPlay = html => { const document = domParser.parseFromString(html, 'text/html').documentElement; const iframe = document.querySelector('iframe'); if (iframe) { if (iframe.src.indexOf('?') !== -1) { iframe.src += '&'; } else { iframe.src += '?'; } iframe.src += 'autoplay=1&auto_play=1'; // DOM parser creates html/body elements around original HTML fragment, // so we need to get innerHTML out of the body and not the entire document return document.querySelector('body').innerHTML; } return html; }; export default class Card extends React.PureComponent { static propTypes = { card: ImmutablePropTypes.map, onOpenMedia: PropTypes.func.isRequired, compact: PropTypes.bool, sensitive: PropTypes.bool, }; static defaultProps = { compact: false, }; state = { previewLoaded: false, embedded: false, revealed: !this.props.sensitive, }; componentWillReceiveProps (nextProps) { if (!Immutable.is(this.props.card, nextProps.card)) { this.setState({ embedded: false, previewLoaded: false }); } if (this.props.sensitive !== nextProps.sensitive) { this.setState({ revealed: !nextProps.sensitive }); } } componentDidMount () { window.addEventListener('resize', this.handleResize, { passive: true }); } componentWillUnmount () { window.removeEventListener('resize', this.handleResize); } handlePhotoClick = () => { const { card, onOpenMedia } = this.props; onOpenMedia( Immutable.fromJS([ { type: 'image', url: card.get('embed_url'), description: card.get('title'), meta: { original: { width: card.get('width'), height: card.get('height'), }, }, }, ]), 0, ); }; handleEmbedClick = () => { const { card } = this.props; if (card.get('type') === 'photo') { this.handlePhotoClick(); } else { this.setState({ embedded: true }); } }; setRef = c => { this.node = c; }; handleImageLoad = () => { this.setState({ previewLoaded: true }); }; handleReveal = e => { e.preventDefault(); e.stopPropagation(); this.setState({ revealed: true }); }; renderVideo () { const { card } = this.props; const content = { __html: addAutoPlay(card.get('html')) }; return (
); } render () { const { card, compact } = this.props; const { embedded, revealed } = this.state; if (card === null) { return null; } const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded; const interactive = card.get('type') !== 'link'; const className = classnames('status-card', { horizontal, compact, interactive }); const title = interactive ? {card.get('title')} : {card.get('title')}; const language = card.get('language') || ''; const description = (
{title} {!(horizontal || compact) &&

{card.get('description')}

} {provider}
); const thumbnailStyle = { visibility: revealed? null : 'hidden', }; if (horizontal) { thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`; } let embed = ''; let canvas = ( ); let thumbnail = ; let spoilerButton = ( ); spoilerButton = (
{spoilerButton}
); if (interactive) { if (embedded) { embed = this.renderVideo(); } else { let iconVariant = 'play'; if (card.get('type') === 'photo') { iconVariant = 'search-plus'; } embed = (
{canvas} {thumbnail} {revealed && (
{horizontal && }
)} {!revealed && spoilerButton}
); } return (
{embed} {!compact && description}
); } else if (card.get('image')) { embed = (
{canvas} {thumbnail}
); } else { embed = (
); } return ( {embed} {description} ); } }