123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import React from 'react';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import PropTypes from 'prop-types';
- import Audio from 'mastodon/features/audio';
- import { connect } from 'react-redux';
- import ImmutablePureComponent from 'react-immutable-pure-component';
- import Footer from 'mastodon/features/picture_in_picture/components/footer';
- const mapStateToProps = (state, { statusId }) => ({
- accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']),
- });
- export default @connect(mapStateToProps)
- class AudioModal extends ImmutablePureComponent {
- static propTypes = {
- media: ImmutablePropTypes.map.isRequired,
- statusId: PropTypes.string.isRequired,
- accountStaticAvatar: PropTypes.string.isRequired,
- options: PropTypes.shape({
- autoPlay: PropTypes.bool,
- }),
- onClose: PropTypes.func.isRequired,
- onChangeBackgroundColor: PropTypes.func.isRequired,
- };
- render () {
- const { media, accountStaticAvatar, statusId, onClose } = this.props;
- const options = this.props.options || {};
- return (
- <div className='modal-root__modal audio-modal'>
- <div className='audio-modal__container'>
- <Audio
- src={media.get('url')}
- alt={media.get('description')}
- duration={media.getIn(['meta', 'original', 'duration'], 0)}
- height={150}
- poster={media.get('preview_url') || accountStaticAvatar}
- backgroundColor={media.getIn(['meta', 'colors', 'background'])}
- foregroundColor={media.getIn(['meta', 'colors', 'foreground'])}
- accentColor={media.getIn(['meta', 'colors', 'accent'])}
- autoPlay={options.autoPlay}
- />
- </div>
- <div className='media-modal__overlay'>
- {statusId && <Footer statusId={statusId} withOpenButton onClose={onClose} />}
- </div>
- </div>
- );
- }
- }
|