import React from 'react'; import PropTypes from 'prop-types'; import Icon from 'mastodon/components/icon'; import { removePictureInPicture } from 'mastodon/actions/picture_in_picture'; import { connect } from 'react-redux'; import { debounce } from 'lodash'; import { FormattedMessage } from 'react-intl'; export default @connect() class PictureInPicturePlaceholder extends React.PureComponent { static propTypes = { width: PropTypes.number, dispatch: PropTypes.func.isRequired, }; state = { width: this.props.width, height: this.props.width && (this.props.width / (16/9)), }; handleClick = () => { const { dispatch } = this.props; dispatch(removePictureInPicture()); }; setRef = c => { this.node = c; if (this.node) { this._setDimensions(); } }; _setDimensions () { const width = this.node.offsetWidth; const height = width / (16/9); this.setState({ width, height }); } componentDidMount () { window.addEventListener('resize', this.handleResize, { passive: true }); } componentWillUnmount () { window.removeEventListener('resize', this.handleResize); } handleResize = debounce(() => { if (this.node) { this._setDimensions(); } }, 250, { trailing: true, }); render () { const { height } = this.state; return (