From c955f98d36868e85b0f1939a3a1c58c00babd4e8 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 25 Apr 2020 12:16:05 +0200 Subject: [PATCH] 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. --- app/javascript/mastodon/components/status.js | 6 +++--- .../mastodon/containers/status_container.js | 4 ++-- .../status/components/detailed_status.js | 4 ++-- .../containers/detailed_status_container.js | 4 ++-- .../mastodon/features/status/index.js | 6 +++--- .../features/ui/components/video_modal.js | 13 ++++++++++--- app/javascript/mastodon/features/video/index.js | 17 ++++++++++++++++- 7 files changed, 38 insertions(+), 16 deletions(-) diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 075ee1b870..9e4442cef7 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -176,8 +176,8 @@ class Status extends ImmutablePureComponent { return
; } - 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); } diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js index 2ba3a3123d..decf7279f9 100644 --- a/app/javascript/mastodon/containers/status_container.js +++ b/app/javascript/mastodon/containers/status_container.js @@ -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) { diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 7a82fa13ac..4201b237e4 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -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 = () => { diff --git a/app/javascript/mastodon/features/status/containers/detailed_status_container.js b/app/javascript/mastodon/features/status/containers/detailed_status_container.js index 333c295dc6..6d5c33240e 100644 --- a/app/javascript/mastodon/features/status/containers/detailed_status_container.js +++ b/app/javascript/mastodon/features/status/containers/detailed_status_container.js @@ -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) { diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index c058120d6b..179df53a16 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -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); } diff --git a/app/javascript/mastodon/features/ui/components/video_modal.js b/app/javascript/mastodon/features/ui/components/video_modal.js index f37fc796f8..e28bd5b491 100644 --- a/app/javascript/mastodon/features/ui/components/video_modal.js +++ b/app/javascript/mastodon/features/ui/components/video_modal.js @@ -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 (
@@ -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')} diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 42ded9d214..95e107618e 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -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 = () => {