Added a toggle for full-width media previews
This commit is contained in:
parent
49bae78c88
commit
319e8e3041
7 changed files with 42 additions and 11 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -21,6 +21,7 @@ const initialState = Immutable.fromJS({
|
||||||
},
|
},
|
||||||
media : {
|
media : {
|
||||||
letterbox : true,
|
letterbox : true,
|
||||||
|
fullwidth : true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue