86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|