-
+
+
{children}
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx
index f019664cf0e..dce276c7587 100644
--- a/app/assets/javascripts/components/components/video_player.jsx
+++ b/app/assets/javascripts/components/components/video_player.jsx
@@ -22,8 +22,8 @@ const videoStyle = {
const muteStyle = {
position: 'absolute',
- top: '10px',
- right: '10px',
+ top: '4px',
+ right: '4px',
color: 'white',
textShadow: "0px 1px 1px black, 1px 0px 1px black",
opacity: '0.8',
@@ -55,8 +55,8 @@ const spoilerSubSpanStyle = {
const spoilerButtonStyle = {
position: 'absolute',
- top: '6px',
- left: '8px',
+ top: '4px',
+ left: '4px',
color: 'white',
textShadow: "0px 1px 1px black, 1px 0px 1px black",
zIndex: '100'
@@ -64,8 +64,8 @@ const spoilerButtonStyle = {
const expandButtonStyle = {
position: 'absolute',
- bottom: '6px',
- right: '8px',
+ bottom: '4px',
+ right: '4px',
color: 'white',
textShadow: "0px 1px 1px black, 1px 0px 1px black",
zIndex: '100'
@@ -128,10 +128,8 @@ const VideoPlayer = React.createClass({
},
handleExpand () {
- const node = ReactDOM.findDOMNode(this).querySelector('video');
- node.pause();
-
- this.props.onOpenVideo(this.props.media);
+ this.video.pause();
+ this.props.onOpenVideo(this.props.media, this.video.currentTime);
},
setRef (c) {
@@ -172,14 +170,14 @@ const VideoPlayer = React.createClass({
const { media, intl, width, height, sensitive, autoplay } = this.props;
let spoilerButton = (
-
-
+
+
);
let expandButton = (
-
+
);
@@ -188,7 +186,7 @@ const VideoPlayer = React.createClass({
if (this.state.hasAudio) {
muteButton = (
-
+
);
}
diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx
index d68acd96a76..f704ac72296 100644
--- a/app/assets/javascripts/components/containers/status_container.jsx
+++ b/app/assets/javascripts/components/containers/status_container.jsx
@@ -75,8 +75,8 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(openModal('MEDIA', { media, index }));
},
- onOpenVideo (media) {
- dispatch(openModal('VIDEO', { media }));
+ onOpenVideo (media, time) {
+ dispatch(openModal('VIDEO', { media, time }));
},
onBlock (account) {
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index b30d991e4db..7ead6880746 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -112,8 +112,8 @@ const Status = React.createClass({
this.props.dispatch(openModal('MEDIA', { media, index }));
},
- handleOpenVideo (media) {
- this.props.dispatch(openModal('VIDEO', { media }));
+ handleOpenVideo (media, time) {
+ this.props.dispatch(openModal('VIDEO', { media, time }));
},
handleReport (status) {
diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
index fa222d7aaf4..1c3519bd33b 100644
--- a/app/assets/javascripts/components/features/ui/components/video_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
@@ -20,6 +20,7 @@ const VideoModal = React.createClass({
propTypes: {
media: ImmutablePropTypes.map.isRequired,
+ time: React.PropTypes.number,
onClose: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired
},
@@ -27,15 +28,15 @@ const VideoModal = React.createClass({
mixins: [PureRenderMixin],
render () {
- const { media, intl, onClose } = this.props;
+ const { media, intl, time, onClose } = this.props;
const url = media.get('url');
return (
);
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index b135d27c90b..1c363ec1538 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -112,6 +112,18 @@
color: $color3;
}
}
+
+ &.overlayed {
+ box-sizing: content-box;
+ background: rgba($color8, 0.6);
+ color: rgba($color5, 0.7);
+ border-radius: 4px;
+ padding: 2px;
+
+ &:hover {
+ background: rgba($color8, 0.9);
+ }
+ }
}
.text-icon-button {