tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a toggle for full-width media previews

Browse Source
This commit is contained in:
Ondřej Hruška
2017-07-08 11:01:56 +02:00
committed by beatrix
parent e3c2183c12
commit dc2b8bdecd
7 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/mastodon/components/media_gallery.js
View File

@@ -141,6 +141,7 @@ export default class MediaGallery extends React.PureComponent {
sensitive: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
@@ -160,7 +161,7 @@ export default class MediaGallery extends React.PureComponent {
}
render () {
const { media, intl, sensitive, letterbox } = this.props;
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
let children;
@@ -185,7 +186,7 @@ export default class MediaGallery extends React.PureComponent {
}
return (
<div className='media-gallery' style={{ height: `${this.props.height}px` }}>
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
</div>

2
app/javascript/mastodon/components/status.js
View File

@@ -626,6 +626,7 @@ backgrounds for collapsed statuses are enabled.
media={attachments.get(0)}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250}
onOpenVideo={onOpenVideo}
/>
@@ -637,6 +638,7 @@ backgrounds for collapsed statuses are enabled.
media={attachments}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250}
onOpenMedia={onOpenMedia}
autoPlayGif={autoPlayGif}

7
app/javascript/mastodon/components/video_player.js
View File

@@ -17,6 +17,7 @@ export default class VideoPlayer extends React.PureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
height: PropTypes.number,
sensitive: PropTypes.bool,
intl: PropTypes.object.isRequired,
@@ -110,7 +111,7 @@ export default class VideoPlayer extends React.PureComponent {
}
render () {
const { media, intl, letterbox, height, sensitive, autoplay } = this.props;
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
let spoilerButton = (
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
@@ -156,7 +157,7 @@ export default class VideoPlayer extends React.PureComponent {
if (this.state.preview && !autoplay) {
return (
<div role='button' tabIndex='0' className='media-spoiler-video' style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
{spoilerButton}
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
</div>
@@ -172,7 +173,7 @@ export default class VideoPlayer extends React.PureComponent {
}
return (
<div className='status__video-player' style={{ height: `${height}px` }}>
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
{spoilerButton}
{muteButton}
{expandButton}