diff --git a/app/assets/javascripts/components/components/extended_video_player.jsx b/app/assets/javascripts/components/components/extended_video_player.jsx
index 66e5dee16d..603f005f9b 100644
--- a/app/assets/javascripts/components/components/extended_video_player.jsx
+++ b/app/assets/javascripts/components/components/extended_video_player.jsx
@@ -3,7 +3,9 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
const ExtendedVideoPlayer = React.createClass({
propTypes: {
- src: React.PropTypes.string.isRequired
+ src: React.PropTypes.string.isRequired,
+ controls: React.PropTypes.bool.isRequired,
+ muted: React.PropTypes.bool.isRequired
},
mixins: [PureRenderMixin],
@@ -11,7 +13,7 @@ const ExtendedVideoPlayer = React.createClass({
render () {
return (
{spoilerButton}
{muteButton}
+ {expandButton}
);
diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx
index fedf80fbf4..d68acd96a7 100644
--- a/app/assets/javascripts/components/containers/status_container.jsx
+++ b/app/assets/javascripts/components/containers/status_container.jsx
@@ -75,6 +75,10 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(openModal('MEDIA', { media, index }));
},
+ onOpenVideo (media) {
+ dispatch(openModal('VIDEO', { media }));
+ },
+
onBlock (account) {
dispatch(blockAccount(account.get('id')));
},
diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index 2da57252ee..ceafc1a32a 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -17,7 +17,8 @@ const DetailedStatus = React.createClass({
propTypes: {
status: ImmutablePropTypes.map.isRequired,
- onOpenMedia: React.PropTypes.func.isRequired
+ onOpenMedia: React.PropTypes.func.isRequired,
+ onOpenVideo: React.PropTypes.func.isRequired,
},
mixins: [PureRenderMixin],
@@ -39,7 +40,7 @@ const DetailedStatus = React.createClass({
if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
- media =
{ancestors}
-
+
{descendants}
diff --git a/app/assets/javascripts/components/features/ui/components/media_modal.jsx b/app/assets/javascripts/components/features/ui/components/media_modal.jsx
index 35eb2cb0cd..130f48b46d 100644
--- a/app/assets/javascripts/components/features/ui/components/media_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/media_modal.jsx
@@ -111,7 +111,7 @@ const MediaModal = React.createClass({
if (attachment.get('type') === 'image') {
content =
;
} else if (attachment.get('type') === 'gifv') {
- content =
;
+ content =
;
}
return (
diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx
index e7ac02dde6..74eb500397 100644
--- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx
+++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx
@@ -1,10 +1,12 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import MediaModal from './media_modal';
+import VideoModal from './video_modal';
import BoostModal from './boost_modal';
import { TransitionMotion, spring } from 'react-motion';
const MODAL_COMPONENTS = {
'MEDIA': MediaModal,
+ 'VIDEO': VideoModal,
'BOOST': BoostModal
};
diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
new file mode 100644
index 0000000000..fa222d7aaf
--- /dev/null
+++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
@@ -0,0 +1,46 @@
+import LoadingIndicator from '../../../components/loading_indicator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ExtendedVideoPlayer from '../../../components/extended_video_player';
+import { defineMessages, injectIntl } from 'react-intl';
+import IconButton from '../../../components/icon_button';
+
+const messages = defineMessages({
+ close: { id: 'lightbox.close', defaultMessage: 'Close' }
+});
+
+const closeStyle = {
+ position: 'absolute',
+ zIndex: '100',
+ top: '4px',
+ right: '4px'
+};
+
+const VideoModal = React.createClass({
+
+ propTypes: {
+ media: ImmutablePropTypes.map.isRequired,
+ onClose: React.PropTypes.func.isRequired,
+ intl: React.PropTypes.object.isRequired
+ },
+
+ mixins: [PureRenderMixin],
+
+ render () {
+ const { media, intl, onClose } = this.props;
+
+ const url = media.get('url');
+
+ return (
+
+ );
+ }
+
+});
+
+export default injectIntl(VideoModal);
diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx
index 740caef9d0..b0403e33eb 100644
--- a/app/assets/javascripts/components/locales/en.jsx
+++ b/app/assets/javascripts/components/locales/en.jsx
@@ -125,6 +125,7 @@ const en = {
"upload_progress.label": "Uploading...",
"video_player.toggle_sound": "Toggle sound",
"video_player.toggle_visible": "Toggle visibility",
+ "video_player.expand": "Expand video",
};
export default en;