Browse Source

[Glitch] Fix expanded video player issues

Port c955f98d36 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
master^2
ThibG Thibaut Girka 1 year ago
parent
commit
572e89e563
7 changed files with 38 additions and 16 deletions
  1. +3
    -3
      app/javascript/flavours/glitch/components/status.js
  2. +2
    -2
      app/javascript/flavours/glitch/containers/status_container.js
  3. +2
    -2
      app/javascript/flavours/glitch/features/status/components/detailed_status.js
  4. +2
    -2
      app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
  5. +3
    -3
      app/javascript/flavours/glitch/features/status/index.js
  6. +10
    -3
      app/javascript/flavours/glitch/features/ui/components/video_modal.js
  7. +16
    -1
      app/javascript/flavours/glitch/features/video/index.js

+ 3
- 3
app/javascript/flavours/glitch/components/status.js View File

@@ -372,8 +372,8 @@ class Status extends ImmutablePureComponent {
}
};

handleOpenVideo = (media, startTime) => {
this.props.onOpenVideo(media, startTime);
handleOpenVideo = (media, options) => {
this.props.onOpenVideo(media, options);
}

handleHotkeyOpenMedia = e => {
@@ -385,7 +385,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);
}


+ 2
- 2
app/javascript/flavours/glitch/containers/status_container.js View File

@@ -178,8 +178,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
dispatch(openModal('MEDIA', { media, index }));
},

onOpenVideo (media, time) {
dispatch(openModal('VIDEO', { media, time }));
onOpenVideo (media, options) {
dispatch(openModal('VIDEO', { media, options }));
},

onBlock (status) {


+ 2
- 2
app/javascript/flavours/glitch/features/status/components/detailed_status.js View File

@@ -66,8 +66,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);
}

_measureHeight (heightJustChanged) {


+ 2
- 2
app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js View File

@@ -130,8 +130,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) {


+ 3
- 3
app/javascript/flavours/glitch/features/status/index.js View File

@@ -316,8 +316,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 => {
@@ -329,7 +329,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);
}


+ 10
- 3
app/javascript/flavours/glitch/features/ui/components/video_modal.js View File

@@ -16,7 +16,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,
};

@@ -28,7 +32,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'>
@@ -37,7 +42,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')}


+ 16
- 1
app/javascript/flavours/glitch/features/video/index.js View File

@@ -111,6 +111,8 @@ class Video extends React.PureComponent {
preventPlayback: PropTypes.bool,
blurhash: PropTypes.string,
link: PropTypes.node,
autoPlay: PropTypes.bool,
defaultVolume: PropTypes.number,
};

state = {
@@ -360,6 +362,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();
}
}
@@ -386,8 +395,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…
Cancel
Save