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.main
parent
46b2cc184f
commit
c955f98d36
|
@ -176,8 +176,8 @@ class Status extends ImmutablePureComponent {
|
|||
return <div className='audio-player' style={{ height: '110px' }} />;
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, startTime) => {
|
||||
this.props.onOpenVideo(media, startTime);
|
||||
handleOpenVideo = (media, options) => {
|
||||
this.props.onOpenVideo(media, options);
|
||||
}
|
||||
|
||||
handleHotkeyOpenMedia = e => {
|
||||
|
@ -190,7 +190,7 @@ class Status extends ImmutablePureComponent {
|
|||
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
|
||||
// TODO: toggle play/paused?
|
||||
} 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 {
|
||||
onOpenMedia(status.get('media_attachments'), 0);
|
||||
}
|
||||
|
|
|
@ -150,8 +150,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
onOpenVideo (media, options) {
|
||||
dispatch(openModal('VIDEO', { media, options }));
|
||||
},
|
||||
|
||||
onBlock (status) {
|
||||
|
|
|
@ -48,8 +48,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
|||
e.stopPropagation();
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, startTime) => {
|
||||
this.props.onOpenVideo(media, startTime);
|
||||
handleOpenVideo = (media, options) => {
|
||||
this.props.onOpenVideo(media, options);
|
||||
}
|
||||
|
||||
handleExpandedToggle = () => {
|
||||
|
|
|
@ -129,8 +129,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
onOpenVideo (media, options) {
|
||||
dispatch(openModal('VIDEO', { media, options }));
|
||||
},
|
||||
|
||||
onBlock (status) {
|
||||
|
|
|
@ -277,8 +277,8 @@ class Status extends ImmutablePureComponent {
|
|||
this.props.dispatch(openModal('MEDIA', { media, index }));
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, time) => {
|
||||
this.props.dispatch(openModal('VIDEO', { media, time }));
|
||||
handleOpenVideo = (media, options) => {
|
||||
this.props.dispatch(openModal('VIDEO', { media, options }));
|
||||
}
|
||||
|
||||
handleHotkeyOpenMedia = e => {
|
||||
|
@ -290,7 +290,7 @@ class Status extends ImmutablePureComponent {
|
|||
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
|
||||
// TODO: toggle play/paused?
|
||||
} 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 {
|
||||
this.handleOpenMedia(status.get('media_attachments'), 0);
|
||||
}
|
||||
|
|
|
@ -14,7 +14,11 @@ export default class VideoModal extends ImmutablePureComponent {
|
|||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
status: ImmutablePropTypes.map,
|
||||
time: PropTypes.number,
|
||||
options: PropTypes.shape({
|
||||
startTime: PropTypes.number,
|
||||
autoPlay: PropTypes.bool,
|
||||
defaultVolume: PropTypes.number,
|
||||
}),
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
@ -52,7 +56,8 @@ export default class VideoModal extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { media, status, time, onClose } = this.props;
|
||||
const { media, status, onClose } = this.props;
|
||||
const options = this.props.options || {};
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal video-modal'>
|
||||
|
@ -61,7 +66,9 @@ export default class VideoModal extends ImmutablePureComponent {
|
|||
preview={media.get('preview_url')}
|
||||
blurhash={media.get('blurhash')}
|
||||
src={media.get('url')}
|
||||
startTime={time}
|
||||
startTime={options.startTime}
|
||||
autoPlay={options.autoPlay}
|
||||
defaultVolume={options.defaultVolume}
|
||||
onCloseVideo={onClose}
|
||||
detailed
|
||||
alt={media.get('description')}
|
||||
|
|
|
@ -109,6 +109,8 @@ class Video extends React.PureComponent {
|
|||
intl: PropTypes.object.isRequired,
|
||||
blurhash: PropTypes.string,
|
||||
link: PropTypes.node,
|
||||
autoPlay: PropTypes.bool,
|
||||
defaultVolume: PropTypes.number,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -367,6 +369,13 @@ class Video extends React.PureComponent {
|
|||
handleLoadedData = () => {
|
||||
if (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();
|
||||
}
|
||||
}
|
||||
|
@ -393,8 +402,14 @@ class Video extends React.PureComponent {
|
|||
height,
|
||||
});
|
||||
|
||||
const options = {
|
||||
startTime: this.video.currentTime,
|
||||
autoPlay: !this.state.paused,
|
||||
defaultVolume: this.state.volume,
|
||||
};
|
||||
|
||||
this.video.pause();
|
||||
this.props.onOpenVideo(media, this.video.currentTime);
|
||||
this.props.onOpenVideo(media, options);
|
||||
}
|
||||
|
||||
handleCloseVideo = () => {
|
||||
|
|
Loading…
Reference in New Issue