content: 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 (
        <div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex='0' onClick={this.handleClick}>
          <Icon id='window-restore' />
          <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
        </div>
      );
    }
  
  }
  