diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js
index 264aff2616..3e44213067 100644
--- a/app/javascript/flavours/glitch/features/account_gallery/index.js
+++ b/app/javascript/flavours/glitch/features/account_gallery/index.js
@@ -112,12 +112,12 @@ export default class AccountGallery extends ImmutablePureComponent {
handleOpenMedia = attachment => {
if (attachment.get('type') === 'video') {
- this.props.dispatch(openModal('VIDEO', { media: attachment }));
+ this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
} else {
const media = attachment.getIn(['status', 'media_attachments']);
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
- this.props.dispatch(openModal('MEDIA', { media, index }));
+ this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status') }));
}
}
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 39386ee1c3..ce6660480b 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -5,7 +5,7 @@ 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';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from 'flavours/glitch/components/icon_button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImageLoader from './image_loader';
@@ -19,8 +19,13 @@ const messages = defineMessages({
@injectIntl
export default class MediaModal extends ImmutablePureComponent {
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
static propTypes = {
media: ImmutablePropTypes.list.isRequired,
+ status: ImmutablePropTypes.map,
index: PropTypes.number.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
@@ -81,8 +86,15 @@ export default class MediaModal extends ImmutablePureComponent {
}));
};
+ handleStatusClick = e => {
+ if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
+ }
+ }
+
render () {
- const { media, intl, onClose } = this.props;
+ const { media, status, intl, onClose } = this.props;
const { navigationHidden } = this.state;
const index = this.getIndex();
@@ -186,10 +198,19 @@ export default class MediaModal extends ImmutablePureComponent {
{content}
+
+
{leftNav}
{rightNav}
+
+ {status && (
+
+ )}
+
diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.js
index 8c74d5a139..3f742c260c 100644
--- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js
@@ -3,17 +3,32 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Video from 'flavours/glitch/features/video';
import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
export default class VideoModal extends ImmutablePureComponent {
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
+ status: ImmutablePropTypes.map,
time: PropTypes.number,
onClose: PropTypes.func.isRequired,
};
+ handleStatusClick = e => {
+ if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
+ }
+ }
+
render () {
- const { media, time, onClose } = this.props;
+ const { media, status, time, onClose } = this.props;
+
+ const link = status &&
;
return (
@@ -24,6 +39,7 @@ export default class VideoModal extends ImmutablePureComponent {
src={media.get('url')}
startTime={time}
onCloseVideo={onClose}
+ link={link}
detailed
alt={media.get('description')}
/>
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index aad24b1d99..3814858024 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -106,6 +106,7 @@ export default class Video extends React.PureComponent {
intl: PropTypes.object.isRequired,
cacheWidth: PropTypes.func,
blurhash: PropTypes.string,
+ link: PropTypes.node,
};
state = {
@@ -384,7 +385,7 @@ export default class Video extends React.PureComponent {
}
render () {
- const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive } = this.props;
+ const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive, link } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100;
const playerStyle = {};
@@ -487,13 +488,15 @@ export default class Video extends React.PureComponent {
/>
- {(detailed || fullscreen) &&
+ {(detailed || fullscreen) && (
{formatTime(currentTime)}
/
{formatTime(duration)}
- }
+ )}
+
+ {link &&
{link}}
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index bc241de148..e5927057ee 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -270,6 +270,31 @@
pointer-events: none;
}
+.media-modal__meta {
+ text-align: center;
+ position: absolute;
+ left: 0;
+ bottom: 20px;
+ width: 100%;
+ pointer-events: none;
+
+ &--shifted {
+ bottom: 62px;
+ }
+
+ a {
+ text-decoration: none;
+ font-weight: 500;
+ color: $ui-secondary-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+}
+
.media-modal__page-dot {
display: inline-block;
}
@@ -519,6 +544,23 @@
}
}
+ &__link {
+ padding: 2px 10px;
+
+ a {
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ color: $white;
+
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+ }
+
&__seek {
cursor: pointer;
height: 24px;