[Glitch] Fix expanded video player issues
Port 3526163340
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
1e1b72ff72
commit
ed2267b78e
7 changed files with 38 additions and 16 deletions
|
@ -372,8 +372,8 @@ class Status extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
handleOpenVideo = (media, startTime) => {
|
handleOpenVideo = (media, options) => {
|
||||||
this.props.onOpenVideo(media, startTime);
|
this.props.onOpenVideo(media, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleHotkeyOpenMedia = e => {
|
handleHotkeyOpenMedia = e => {
|
||||||
|
@ -385,7 +385,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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -178,8 +178,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
|
||||||
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) {
|
||||||
|
|
|
@ -66,8 +66,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);
|
||||||
}
|
}
|
||||||
|
|
||||||
_measureHeight (heightJustChanged) {
|
_measureHeight (heightJustChanged) {
|
||||||
|
|
|
@ -130,8 +130,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) {
|
||||||
|
|
|
@ -316,8 +316,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 => {
|
||||||
|
@ -329,7 +329,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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -28,7 +32,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'>
|
||||||
|
@ -37,7 +42,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')}
|
||||||
|
|
|
@ -111,6 +111,8 @@ class Video extends React.PureComponent {
|
||||||
preventPlayback: PropTypes.bool,
|
preventPlayback: PropTypes.bool,
|
||||||
blurhash: PropTypes.string,
|
blurhash: PropTypes.string,
|
||||||
link: PropTypes.node,
|
link: PropTypes.node,
|
||||||
|
autoPlay: PropTypes.bool,
|
||||||
|
defaultVolume: PropTypes.number,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -360,6 +362,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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -386,8 +395,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