forked from asonix/mastodon
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:
parent
46b2cc184f
commit
c955f98d36
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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')}
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Reference in a new issue