autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix expanded video player issues (#13541)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/components/status.js
View File

@ -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);
}

4
app/javascript/mastodon/containers/status_container.js
View File

@ -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) {

4
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -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 = () => {

4
app/javascript/mastodon/features/status/containers/detailed_status_container.js
View File

@ -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) {

6
app/javascript/mastodon/features/status/index.js
View File

@ -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);
}

13
app/javascript/mastodon/features/ui/components/video_modal.js
View File

@ -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')}

17
app/javascript/mastodon/features/video/index.js
View File

@ -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 = () => {