Skip to content

Commit acb5f44

Browse files
GargronGargron
authored
Add button to view context to media modal (mastodon#10676)
* Add "view context" button to media modal when opened from gallery * Add "view context" button to video modal Allow closing the video modal by navigating back in the browser, just like the media modal
1 parent 2a6260a commit acb5f44

5 files changed

Lines changed: 119 additions & 12 deletions

File tree

‎app/javascript/mastodon/features/account_gallery/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,12 @@ class AccountGallery extends ImmutablePureComponent {
100100

101101
handleOpenMedia = attachment => {
102102
if (attachment.get('type') === 'video') {
103-
this.props.dispatch(openModal('VIDEO', { media: attachment }));
103+
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
104104
} else {
105105
const media = attachment.getIn(['status', 'media_attachments']);
106106
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
107107

108-
this.props.dispatch(openModal('MEDIA', { media, index }));
108+
this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status') }));
109109
}
110110
}
111111

‎app/javascript/mastodon/features/ui/components/media_modal.js‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import ReactSwipeableViews from 'react-swipeable-views';
33
import ImmutablePropTypes from 'react-immutable-proptypes';
44
import PropTypes from 'prop-types';
5-
import Video from '../../video';
6-
import ExtendedVideoPlayer from '../../../components/extended_video_player';
5+
import Video from 'mastodon/features/video';
6+
import ExtendedVideoPlayer from 'mastodon/components/extended_video_player';
77
import classNames from 'classnames';
8-
import { defineMessages, injectIntl } from 'react-intl';
9-
import IconButton from '../../../components/icon_button';
8+
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
9+
import IconButton from 'mastodon/components/icon_button';
1010
import ImmutablePureComponent from 'react-immutable-pure-component';
1111
import ImageLoader from './image_loader';
1212
import Icon from 'mastodon/components/icon';
@@ -24,6 +24,7 @@ class MediaModal extends ImmutablePureComponent {
2424

2525
static propTypes = {
2626
media: ImmutablePropTypes.list.isRequired,
27+
status: ImmutablePropTypes.map,
2728
index: PropTypes.number.isRequired,
2829
onClose: PropTypes.func.isRequired,
2930
intl: PropTypes.object.isRequired,
@@ -72,9 +73,12 @@ class MediaModal extends ImmutablePureComponent {
7273

7374
componentDidMount () {
7475
window.addEventListener('keydown', this.handleKeyDown, false);
76+
7577
if (this.context.router) {
7678
const history = this.context.router.history;
79+
7780
history.push(history.location.pathname, previewState);
81+
7882
this.unlistenHistory = history.listen(() => {
7983
this.props.onClose();
8084
});
@@ -83,6 +87,7 @@ class MediaModal extends ImmutablePureComponent {
8387

8488
componentWillUnmount () {
8589
window.removeEventListener('keydown', this.handleKeyDown);
90+
8691
if (this.context.router) {
8792
this.unlistenHistory();
8893

@@ -102,8 +107,15 @@ class MediaModal extends ImmutablePureComponent {
102107
}));
103108
};
104109

110+
handleStatusClick = e => {
111+
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
112+
e.preventDefault();
113+
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
114+
}
115+
}
116+
105117
render () {
106-
const { media, intl, onClose } = this.props;
118+
const { media, status, intl, onClose } = this.props;
107119
const { navigationHidden } = this.state;
108120

109121
const index = this.getIndex();
@@ -207,10 +219,19 @@ class MediaModal extends ImmutablePureComponent {
207219
{content}
208220
</ReactSwipeableViews>
209221
</div>
222+
210223
<div className={navigationClassName}>
211224
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
225+
212226
{leftNav}
213227
{rightNav}
228+
229+
{status && (
230+
<div className={classNames('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
231+
<a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
232+
</div>
233+
)}
234+
214235
<ul className='media-modal__pagination'>
215236
{pagination}
216237
</ul>

‎app/javascript/mastodon/features/ui/components/video_modal.js‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,58 @@
11
import React from 'react';
22
import ImmutablePropTypes from 'react-immutable-proptypes';
33
import PropTypes from 'prop-types';
4-
import Video from '../../video';
4+
import Video from 'mastodon/features/video';
55
import ImmutablePureComponent from 'react-immutable-pure-component';
6+
import { FormattedMessage } from 'react-intl';
7+
8+
export const previewState = 'previewVideoModal';
69

710
export default class VideoModal extends ImmutablePureComponent {
811

912
static propTypes = {
1013
media: ImmutablePropTypes.map.isRequired,
14+
status: ImmutablePropTypes.map,
1115
time: PropTypes.number,
1216
onClose: PropTypes.func.isRequired,
1317
};
1418

19+
static contextTypes = {
20+
router: PropTypes.object,
21+
};
22+
23+
componentDidMount () {
24+
if (this.context.router) {
25+
const history = this.context.router.history;
26+
27+
history.push(history.location.pathname, previewState);
28+
29+
this.unlistenHistory = history.listen(() => {
30+
this.props.onClose();
31+
});
32+
}
33+
}
34+
35+
componentWillUnmount () {
36+
if (this.context.router) {
37+
this.unlistenHistory();
38+
39+
if (this.context.router.history.location.state === previewState) {
40+
this.context.router.history.goBack();
41+
}
42+
}
43+
}
44+
45+
handleStatusClick = e => {
46+
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
47+
e.preventDefault();
48+
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
49+
}
50+
}
51+
1552
render () {
16-
const { media, time, onClose } = this.props;
53+
const { media, status, time, onClose } = this.props;
54+
55+
const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
1756

1857
return (
1958
<div className='modal-root__modal video-modal'>
@@ -24,6 +63,7 @@ export default class VideoModal extends ImmutablePureComponent {
2463
src={media.get('url')}
2564
startTime={time}
2665
onCloseVideo={onClose}
66+
link={link}
2767
detailed
2868
alt={media.get('description')}
2969
/>

‎app/javascript/mastodon/features/video/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ class Video extends React.PureComponent {
104104
cacheWidth: PropTypes.func,
105105
intl: PropTypes.object.isRequired,
106106
blurhash: PropTypes.string,
107+
link: PropTypes.node,
107108
};
108109

109110
state = {
@@ -361,7 +362,7 @@ class Video extends React.PureComponent {
361362
}
362363

363364
render () {
364-
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive } = this.props;
365+
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link } = this.props;
365366
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
366367
const progress = (currentTime / duration) * 100;
367368

@@ -453,6 +454,7 @@ class Video extends React.PureComponent {
453454
<div className='video-player__buttons left'>
454455
<button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
455456
<button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
457+
456458
<div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
457459
<div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
458460
<span
@@ -462,13 +464,15 @@ class Video extends React.PureComponent {
462464
/>
463465
</div>
464466

465-
{(detailed || fullscreen) &&
467+
{(detailed || fullscreen) && (
466468
<span>
467469
<span className='video-player__time-current'>{formatTime(currentTime)}</span>
468470
<span className='video-player__time-sep'>/</span>
469471
<span className='video-player__time-total'>{formatTime(duration)}</span>
470472
</span>
471-
}
473+
)}
474+
475+
{link && <span className='video-player__link'>{link}</span>}
472476
</div>
473477

474478
<div className='video-player__buttons right'>

‎app/javascript/styles/mastodon/components.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3766,6 +3766,31 @@ a.status-card.compact:hover {
37663766
pointer-events: none;
37673767
}
37683768

3769+
.media-modal__meta {
3770+
text-align: center;
3771+
position: absolute;
3772+
left: 0;
3773+
bottom: 20px;
3774+
width: 100%;
3775+
pointer-events: none;
3776+
3777+
&--shifted {
3778+
bottom: 62px;
3779+
}
3780+
3781+
a {
3782+
text-decoration: none;
3783+
font-weight: 500;
3784+
color: $ui-secondary-color;
3785+
3786+
&:hover,
3787+
&:focus,
3788+
&:active {
3789+
text-decoration: underline;
3790+
}
3791+
}
3792+
}
3793+
37693794
.media-modal__page-dot {
37703795
display: inline-block;
37713796
}
@@ -4676,6 +4701,23 @@ a.status-card.compact:hover {
46764701
}
46774702
}
46784703

4704+
&__link {
4705+
padding: 2px 10px;
4706+
4707+
a {
4708+
text-decoration: none;
4709+
font-size: 14px;
4710+
font-weight: 500;
4711+
color: $white;
4712+
4713+
&:hover,
4714+
&:active,
4715+
&:focus {
4716+
text-decoration: underline;
4717+
}
4718+
}
4719+
}
4720+
46794721
&__seek {
46804722
cursor: pointer;
46814723
height: 24px;

0 commit comments

Comments
 (0)
⚡