content: import React from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import Video from 'mastodon/features/video';
  import Audio from 'mastodon/features/audio';
  import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
  import Header from './components/header';
  import Footer from './components/footer';
  
  const mapStateToProps = state => ({
    ...state.get('picture_in_picture'),
  });
  
  export default @connect(mapStateToProps)
  class PictureInPicture extends React.Component {
  
    static propTypes = {
      statusId: PropTypes.string,
      accountId: PropTypes.string,
      type: PropTypes.string,
      src: PropTypes.string,
      muted: PropTypes.bool,
      volume: PropTypes.number,
      currentTime: PropTypes.number,
      poster: PropTypes.string,
      backgroundColor: PropTypes.string,
      foregroundColor: PropTypes.string,
      accentColor: PropTypes.string,
      dispatch: PropTypes.func.isRequired,
    };
  
    handleClose = () => {
      const { dispatch } = this.props;
      dispatch(removePictureInPicture());
    }
  
    render () {
      const { type, src, currentTime, accountId, statusId } = this.props;
  
      if (!currentTime) {
        return null;
      }
  
      let player;
  
      if (type === 'video') {
        player = (
          <Video
            src={src}
            currentTime={this.props.currentTime}
            volume={this.props.volume}
            muted={this.props.muted}
            autoPlay
            inline
            alwaysVisible
          />
        );
      } else if (type === 'audio') {
        player = (
          <Audio
            src={src}
            currentTime={this.props.currentTime}
            volume={this.props.volume}
            muted={this.props.muted}
            poster={this.props.poster}
            backgroundColor={this.props.backgroundColor}
            foregroundColor={this.props.foregroundColor}
            accentColor={this.props.accentColor}
            autoPlay
          />
        );
      }
  
      return (
        <div className='picture-in-picture'>
          <Header accountId={accountId} statusId={statusId} onClose={this.handleClose} />
  
          {player}
  
          <Footer statusId={statusId} />
        </div>
      );
    }
  
  }
  