70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|