diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index f929d17a685..c937052661d 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -259,8 +259,8 @@ export default class Status extends ImmutablePureComponent {
}
};
- handleOpenVideo = startTime => {
- this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
+ handleOpenVideo = (media, startTime) => {
+ this.props.onOpenVideo(media, startTime);
}
handleHotkeyReply = e => {
diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js
index b79876419ce..0e1904132e4 100644
--- a/app/javascript/flavours/glitch/containers/media_container.js
+++ b/app/javascript/flavours/glitch/containers/media_container.js
@@ -8,7 +8,7 @@ import Video from 'flavours/glitch/features/video';
import Card from 'flavours/glitch/features/status/components/card';
import ModalRoot from 'flavours/glitch/components/modal_root';
import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
-import { fromJS } from 'immutable';
+import { List as ImmutableList, fromJS } from 'immutable';
const { localeData, messages } = getLocale();
addLocaleData(localeData);
@@ -25,6 +25,7 @@ export default class MediaContainer extends PureComponent {
state = {
media: null,
index: null,
+ time: null,
};
handleOpenMedia = (media, index) => {
@@ -32,9 +33,16 @@ export default class MediaContainer extends PureComponent {
this.setState({ media, index });
}
+ handleOpenVideo = (video, time) => {
+ const media = ImmutableList([video]);
+
+ document.body.classList.add('media-standalone__body');
+ this.setState({ media, time });
+ }
+
handleCloseMedia = () => {
document.body.classList.remove('media-standalone__body');
- this.setState({ media: null, index: null });
+ this.setState({ media: null, index: null, time: null });
}
render () {
@@ -51,18 +59,25 @@ export default class MediaContainer extends PureComponent {
Object.assign(props, {
...(media ? { media: fromJS(media) } : {}),
...(card ? { card: fromJS(card) } : {}),
+
+ ...(componentName === 'Video' ? {
+ onOpenVideo: this.handleOpenVideo,
+ } : {
+ onOpenMedia: this.handleOpenMedia,
+ }),
});
return ReactDOM.createPortal(
- ,
+ ,
component,
);
})}
- {this.state.media === null || this.state.index === null ? null : (
+ {this.state.media && (
)}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 16f7ae830e1..5cfc9dfaed1 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -37,8 +37,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
e.stopPropagation();
}
- handleOpenVideo = startTime => {
- this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
+ handleOpenVideo = (media, startTime) => {
+ this.props.onOpenVideo(media, startTime);
}
render () {
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
index 6ab6770ed48..bffe3b1f738 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -2,6 +2,7 @@ import React from 'react';
import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
+import Video from 'flavours/glitch/features/video';
import ExtendedVideoPlayer from 'flavours/glitch/components/extended_video_player';
import classNames from 'classnames';
import { defineMessages, injectIntl } from 'react-intl';
@@ -112,6 +113,22 @@ export default class MediaModal extends ImmutablePureComponent {
onClick={this.toggleNavigation}
/>
);
+ } else if (image.get('type') === 'video') {
+ const { time } = this.props;
+
+ return (
+
+ );
} else if (image.get('type') === 'gifv') {
return (
e.stopPropagation();
+
handlePlay = () => {
this.setState({ paused: false });
}
@@ -246,8 +249,17 @@ export default class Video extends React.PureComponent {
}
handleOpenVideo = () => {
+ const { src, preview, width, height } = this.props;
+ const media = fromJS({
+ type: 'video',
+ url: src,
+ preview_url: preview,
+ width,
+ height,
+ });
+
this.video.pause();
- this.props.onOpenVideo(this.video.currentTime);
+ this.props.onOpenVideo(media, this.video.currentTime);
}
handleCloseVideo = () => {
@@ -279,7 +291,15 @@ export default class Video extends React.PureComponent {
}
return (
-