Fix expanded video player issues (#13541)

Fixes #13536

- Expanding a paused video doesn't autoplay anymore
- Default volume level for the expanded video inherited from the original video

Position/playing state/volume are carried over from the original video player
to the modal, but they're not reported back to the modal as it would require
deeper changes.
This commit is contained in:
ThibG 2020-04-25 12:16:05 +02:00 committed by GitHub
parent 46b2cc184f
commit c955f98d36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 16 deletions

View File

@ -176,8 +176,8 @@ class Status extends ImmutablePureComponent {
return <div className='audio-player' style={{ height: '110px' }} />; return <div className='audio-player' style={{ height: '110px' }} />;
} }
handleOpenVideo = (media, startTime) => { handleOpenVideo = (media, options) => {
this.props.onOpenVideo(media, startTime); this.props.onOpenVideo(media, options);
} }
handleHotkeyOpenMedia = e => { handleHotkeyOpenMedia = e => {
@ -190,7 +190,7 @@ class Status extends ImmutablePureComponent {
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
// TODO: toggle play/paused? // TODO: toggle play/paused?
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
onOpenVideo(status.getIn(['media_attachments', 0]), 0); onOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
} else { } else {
onOpenMedia(status.get('media_attachments'), 0); onOpenMedia(status.get('media_attachments'), 0);
} }

View File

@ -150,8 +150,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, index }));
}, },
onOpenVideo (media, time) { onOpenVideo (media, options) {
dispatch(openModal('VIDEO', { media, time })); dispatch(openModal('VIDEO', { media, options }));
}, },
onBlock (status) { onBlock (status) {

View File

@ -48,8 +48,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
e.stopPropagation(); e.stopPropagation();
} }
handleOpenVideo = (media, startTime) => { handleOpenVideo = (media, options) => {
this.props.onOpenVideo(media, startTime); this.props.onOpenVideo(media, options);
} }
handleExpandedToggle = () => { handleExpandedToggle = () => {

View File

@ -129,8 +129,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(openModal('MEDIA', { media, index })); dispatch(openModal('MEDIA', { media, index }));
}, },
onOpenVideo (media, time) { onOpenVideo (media, options) {
dispatch(openModal('VIDEO', { media, time })); dispatch(openModal('VIDEO', { media, options }));
}, },
onBlock (status) { onBlock (status) {

View File

@ -277,8 +277,8 @@ class Status extends ImmutablePureComponent {
this.props.dispatch(openModal('MEDIA', { media, index })); this.props.dispatch(openModal('MEDIA', { media, index }));
} }
handleOpenVideo = (media, time) => { handleOpenVideo = (media, options) => {
this.props.dispatch(openModal('VIDEO', { media, time })); this.props.dispatch(openModal('VIDEO', { media, options }));
} }
handleHotkeyOpenMedia = e => { handleHotkeyOpenMedia = e => {
@ -290,7 +290,7 @@ class Status extends ImmutablePureComponent {
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
// TODO: toggle play/paused? // TODO: toggle play/paused?
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
this.handleOpenVideo(status.getIn(['media_attachments', 0]), 0); this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
} else { } else {
this.handleOpenMedia(status.get('media_attachments'), 0); this.handleOpenMedia(status.get('media_attachments'), 0);
} }

View File

@ -14,7 +14,11 @@ export default class VideoModal extends ImmutablePureComponent {
static propTypes = { static propTypes = {
media: ImmutablePropTypes.map.isRequired, media: ImmutablePropTypes.map.isRequired,
status: ImmutablePropTypes.map, status: ImmutablePropTypes.map,
time: PropTypes.number, options: PropTypes.shape({
startTime: PropTypes.number,
autoPlay: PropTypes.bool,
defaultVolume: PropTypes.number,
}),
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };
@ -52,7 +56,8 @@ export default class VideoModal extends ImmutablePureComponent {
} }
render () { render () {
const { media, status, time, onClose } = this.props; const { media, status, onClose } = this.props;
const options = this.props.options || {};
return ( return (
<div className='modal-root__modal video-modal'> <div className='modal-root__modal video-modal'>
@ -61,7 +66,9 @@ export default class VideoModal extends ImmutablePureComponent {
preview={media.get('preview_url')} preview={media.get('preview_url')}
blurhash={media.get('blurhash')} blurhash={media.get('blurhash')}
src={media.get('url')} src={media.get('url')}
startTime={time} startTime={options.startTime}
autoPlay={options.autoPlay}
defaultVolume={options.defaultVolume}
onCloseVideo={onClose} onCloseVideo={onClose}
detailed detailed
alt={media.get('description')} alt={media.get('description')}

View File

@ -109,6 +109,8 @@ class Video extends React.PureComponent {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
blurhash: PropTypes.string, blurhash: PropTypes.string,
link: PropTypes.node, link: PropTypes.node,
autoPlay: PropTypes.bool,
defaultVolume: PropTypes.number,
}; };
state = { state = {
@ -367,6 +369,13 @@ class Video extends React.PureComponent {
handleLoadedData = () => { handleLoadedData = () => {
if (this.props.startTime) { if (this.props.startTime) {
this.video.currentTime = this.props.startTime; this.video.currentTime = this.props.startTime;
}
if (this.props.defaultVolume !== undefined) {
this.video.volume = this.props.defaultVolume;
}
if (this.props.autoPlay) {
this.video.play(); this.video.play();
} }
} }
@ -393,8 +402,14 @@ class Video extends React.PureComponent {
height, height,
}); });
const options = {
startTime: this.video.currentTime,
autoPlay: !this.state.paused,
defaultVolume: this.state.volume,
};
this.video.pause(); this.video.pause();
this.props.onOpenVideo(media, this.video.currentTime); this.props.onOpenVideo(media, options);
} }
handleCloseVideo = () => { handleCloseVideo = () => {