12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- 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>
- );
- }
- }
|