Added a toggle for full-width media previews

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

View File

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

View File

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

View File

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

View File

@ -231,6 +231,14 @@ export default class SettingsModal extends React.PureComponent {
> >
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' /> <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
</SettingsItem> </SettingsItem>
<SettingsItem
settings={this.props.settings}
item={['media', 'fullwidth']}
id='mastodon-settings--media-fullwidth'
onChange={this.props.toggleSetting}
>
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
</SettingsItem>
</div> </div>
); );
} }

View File

@ -162,6 +162,7 @@
"settings.image_backgrounds_users": "Give collapsed toots an image background", "settings.image_backgrounds_users": "Give collapsed toots an image background",
"settings.media": "Media", "settings.media": "Media",
"settings.media_letterbox": "Letterbox media", "settings.media_letterbox": "Letterbox media",
"settings.media_fullwidth": "Full-width media previews",
"settings.preferences": "User preferences", "settings.preferences": "User preferences",
"settings.wide_view": "Wide view (Desktop mode only)", "settings.wide_view": "Wide view (Desktop mode only)",
"status.cannot_reblog": "This post cannot be boosted", "status.cannot_reblog": "This post cannot be boosted",

View File

@ -21,6 +21,7 @@ const initialState = Immutable.fromJS({
}, },
media : { media : {
letterbox : true, letterbox : true,
fullwidth : true,
}, },
}); });

View File

@ -2318,6 +2318,11 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 100; z-index: 100;
margin-top: 15px; // Add margin when used bare for NSFW video player
.media-gallery & {
margin-top: 0;
}
} }
.media-spoiler__warning { .media-spoiler__warning {
@ -3707,11 +3712,15 @@ button.icon-button.active i.fa-retweet {
.media-gallery { .media-gallery {
box-sizing: border-box; box-sizing: border-box;
margin-top: 15px; margin-top: 15px;
margin-left: -68px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: calc(100% + 80px);
background: $base-shadow-color; background: $base-shadow-color;
width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
.detailed-status & { .detailed-status & {
margin-left:-10px; margin-left:-10px;
@ -3780,10 +3789,14 @@ button.icon-button.active i.fa-retweet {
box-sizing: border-box; box-sizing: border-box;
cursor: default; /* May not be needed */ cursor: default; /* May not be needed */
margin-top: 15px; margin-top: 15px;
margin-left:-68px;
width: calc(100% + 80px);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 100%;
&.full-width {
margin-left: -68px;
width: calc(100% + 80px);
}
} }
.status__video-player-video { .status__video-player-video {
@ -3836,9 +3849,13 @@ button.icon-button.active i.fa-retweet {
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
margin-top: 15px; margin-top: 15px;
position: relative;
width: 100%;
&.full-width {
margin-left: -68px; margin-left: -68px;
width: calc(100% + 80px); width: calc(100% + 80px);
position: relative; }
} }
.media-spoiler-video-play-icon { .media-spoiler-video-play-icon {