sforkowany z mirror/soapbox
VideoModal: convert to TSX
rodzic
e648162f66
commit
b8eff3e46b
|
@ -1,53 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import Video from 'soapbox/features/video';
|
||||
|
||||
export default @withRouter
|
||||
class VideoModal extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
status: ImmutablePropTypes.record,
|
||||
account: ImmutablePropTypes.record,
|
||||
time: PropTypes.number,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
|
||||
handleStatusClick = e => {
|
||||
const { status, account } = this.props;
|
||||
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
this.props.history.push(`/@${account.get('acct')}/posts/${status.get('id')}`);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { media, status, account, time, onClose } = this.props;
|
||||
|
||||
const link = status && account && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal video-modal'>
|
||||
<div>
|
||||
<Video
|
||||
preview={media.get('preview_url')}
|
||||
blurhash={media.get('blurhash')}
|
||||
src={media.get('url')}
|
||||
startTime={time}
|
||||
onCloseVideo={onClose}
|
||||
link={link}
|
||||
detailed
|
||||
alt={media.get('description')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import Video from 'soapbox/features/video';
|
||||
|
||||
import type { Status, Account, Attachment } from 'soapbox/types/entities';
|
||||
|
||||
interface IVideoModal {
|
||||
media: Attachment,
|
||||
status: Status,
|
||||
account: Account,
|
||||
time: number,
|
||||
onClose: () => void,
|
||||
}
|
||||
|
||||
const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClose }) => {
|
||||
const history = useHistory();
|
||||
|
||||
const handleStatusClick: React.MouseEventHandler = e => {
|
||||
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
history.push(`/@${account.acct}/posts/${status.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const link = status && account && (
|
||||
<a href={status.url} onClick={handleStatusClick}>
|
||||
<FormattedMessage id='lightbox.view_context' defaultMessage='View context' />
|
||||
</a>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal video-modal'>
|
||||
<div>
|
||||
<Video
|
||||
preview={media.preview_url}
|
||||
blurhash={media.blurhash}
|
||||
src={media.url}
|
||||
startTime={time}
|
||||
onCloseVideo={onClose}
|
||||
link={link}
|
||||
detailed
|
||||
alt={media.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoModal;
|
Ładowanie…
Reference in New Issue