Media display improvements

- built in fullwidth styling
 - letterbox settings toggle
 - media no longer counts towards height when making toot-collapsing
measurements
This commit is contained in:
kibigo! 2017-06-30 02:15:18 -07:00
parent a07244026e
commit 6b3a6744c9
11 changed files with 132 additions and 144 deletions

View file

@ -15,6 +15,7 @@ class Item extends React.PureComponent {
attachment: ImmutablePropTypes.map.isRequired,
index: PropTypes.number.isRequired,
size: PropTypes.number.isRequired,
letterbox: PropTypes.bool,
onClick: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool.isRequired,
};
@ -31,7 +32,7 @@ class Item extends React.PureComponent {
}
render () {
const { attachment, index, size } = this.props;
const { attachment, index, size, letterbox } = this.props;
let width = 50;
let height = 100;
@ -101,7 +102,7 @@ class Item extends React.PureComponent {
onClick={this.handleClick}
target='_blank'
>
<img src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
<img className={letterbox ? 'letterbox' : ''} src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
</a>
);
} else if (attachment.get('type') === 'gifv') {
@ -110,7 +111,7 @@ class Item extends React.PureComponent {
thumbnail = (
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
<video
className='media-gallery__item-gifv-thumbnail'
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
role='application'
src={attachment.get('url')}
onClick={this.handleClick}
@ -139,6 +140,7 @@ export default class MediaGallery extends React.PureComponent {
static propTypes = {
sensitive: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
letterbox: PropTypes.bool,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
@ -158,7 +160,7 @@ export default class MediaGallery extends React.PureComponent {
}
render () {
const { media, intl, sensitive } = this.props;
const { media, intl, sensitive, letterbox } = this.props;
let children;
@ -179,7 +181,7 @@ export default class MediaGallery extends React.PureComponent {
);
} else {
const size = media.take(4).size;
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} />);
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
}
return (

View file

@ -174,7 +174,7 @@ class Status extends ImmutablePureComponent {
if (collapse !== undefined) this.collapse(collapse);
else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > (status.get('media_attachments').size > 0 && !this.props.muted ? 650 : 400)) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
else if (settings.getIn(['collapsed', 'auto', 'media']) && !(status.get('spoiler_text').length > 0) && status.get('media_attachments').size > 0) this.collapse();
@ -296,10 +296,27 @@ class Status extends ImmutablePureComponent {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
media = (
<VideoPlayer
media={status.getIn(['media_attachments', 0])}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
height={250}
onOpenVideo={this.props.onOpenVideo}
/>
);
mediaIcon = 'video-camera';
} else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
media = (
<MediaGallery
media={status.get('media_attachments')}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
height={250}
onOpenMedia={this.props.onOpenMedia}
autoPlayGif={this.props.autoPlayGif}
/>
);
mediaIcon = 'picture-o';
}

View file

@ -16,7 +16,7 @@ export default class VideoPlayer extends React.PureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
width: PropTypes.number,
letterbox: PropTypes.bool,
height: PropTypes.number,
sensitive: PropTypes.bool,
intl: PropTypes.object.isRequired,
@ -25,7 +25,6 @@ export default class VideoPlayer extends React.PureComponent {
};
static defaultProps = {
width: 239,
height: 110,
};
@ -111,7 +110,7 @@ export default class VideoPlayer extends React.PureComponent {
}
render () {
const { media, intl, width, height, sensitive, autoplay } = this.props;
const { media, intl, letterbox, height, sensitive, autoplay } = this.props;
let spoilerButton = (
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
@ -138,7 +137,7 @@ export default class VideoPlayer extends React.PureComponent {
if (!this.state.visible) {
if (sensitive) {
return (
<div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@ -146,7 +145,7 @@ export default class VideoPlayer extends React.PureComponent {
);
} else {
return (
<div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@ -157,7 +156,7 @@ export default class VideoPlayer extends React.PureComponent {
if (this.state.preview && !autoplay) {
return (
<div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
<div role='button' tabIndex='0' className='media-spoiler-video' 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>
@ -166,20 +165,20 @@ export default class VideoPlayer extends React.PureComponent {
if (this.state.videoError) {
return (
<div style={{ width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
<div style={{ height: `${height}px` }} className='video-error-cover' >
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
</div>
);
}
return (
<div className='status__video-player' style={{ width: `${width}px`, height: `${height}px` }}>
<div className='status__video-player' style={{ height: `${height}px` }}>
{spoilerButton}
{muteButton}
{expandButton}
<video
className='status__video-player-video'
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
role='button'
tabIndex='0'
ref={this.setRef}

View file

@ -20,6 +20,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
settings: ImmutablePropTypes.map.isRequired,
onOpenMedia: PropTypes.func.isRequired,
onOpenVideo: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool,
@ -36,6 +37,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
const { settings } = this.props;
let media = '';
let mediaIcon = null;
@ -45,10 +47,28 @@ export default class DetailedStatus extends ImmutablePureComponent {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media = <AttachmentList media={status.get('media_attachments')} />;
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
media = (
<VideoPlayer
sensitive={status.get('sensitive')}
media={status.getIn(['media_attachments', 0])}
letterbox={settings.getIn(['media', 'letterbox'])}
height={250}
onOpenVideo={this.props.onOpenVideo}
autoplay
/>
);
mediaIcon = 'video-camera';
} else {
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
media = (
<MediaGallery
sensitive={status.get('sensitive')}
media={status.get('media_attachments')}
letterbox={settings.getIn(['media', 'letterbox'])}
height={250}
onOpenMedia={this.props.onOpenMedia}
autoPlayGif={this.props.autoPlayGif}
/>
);
mediaIcon = 'picture-o';
}
} else media = <CardContainer statusId={status.get('id')} />;

View file

@ -37,6 +37,7 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
status: getStatus(state, Number(props.params.statusId)),
settings: state.get('local_settings'),
ancestorsIds: state.getIn(['contexts', 'ancestors', Number(props.params.statusId)]),
descendantsIds: state.getIn(['contexts', 'descendants', Number(props.params.statusId)]),
me: state.getIn(['meta', 'me']),
@ -60,6 +61,7 @@ export default class Status extends ImmutablePureComponent {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
status: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map.isRequired,
ancestorsIds: ImmutablePropTypes.list,
descendantsIds: ImmutablePropTypes.list,
me: PropTypes.number,
@ -143,7 +145,7 @@ export default class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
const { status, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
if (status === null) {
return (
@ -172,6 +174,7 @@ export default class Status extends ImmutablePureComponent {
<DetailedStatus
status={status}
settings={settings}
autoPlayGif={autoPlayGif}
me={me}
onOpenVideo={this.handleOpenVideo}

View file

@ -168,12 +168,28 @@ export default class SettingsModal extends React.PureComponent {
);
}
Media = () => {
return (
<div>
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
<SettingsItem
settings={this.props.settings}
item={['media', 'letterbox']}
id='mastodon-settings--media-letterbox'
onChange={this.props.toggleSetting}
>
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
</SettingsItem>
</div>
);
}
navigateTo = (e) =>
this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') });
render () {
const { General, CollapsedStatuses, navigateTo } = this;
const { General, CollapsedStatuses, Media, navigateTo } = this;
const { onClose } = this.props;
const { currentIndex } = this.state;
@ -187,8 +203,11 @@ export default class SettingsModal extends React.PureComponent {
<a onClick={navigateTo} role='button' data-mastodon-navigation_index='1' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 1 ? ' active' : ''}`}>
<FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' />
</a>
<a onClick={navigateTo} role='button' data-mastodon-navigation_index='2' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 2 ? ' active' : ''}`}>
<FormattedMessage id='settings.media' defaultMessage='Media' />
</a>
<a href='/settings/preferences' className='settings-modal__navigation-item'>
<i className='fa fa-fw fa-cogs' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' />
<i className='fa fa-fw fa-cog' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' />
</a>
<a onClick={onClose} role='button' tabIndex='0' className='settings-modal__navigation-close'>
<FormattedMessage id='settings.close' defaultMessage='Close' />
@ -201,6 +220,7 @@ export default class SettingsModal extends React.PureComponent {
[
<General />,
<CollapsedStatuses />,
<Media />,
][currentIndex] || <General />
}
</div>

View file

@ -1226,9 +1226,17 @@
"defaultMessage": "Preview collapsed toot media",
"id": "settings.image_backgrounds_media"
},
{
"defaultMessage": "Media",
"id": "settings.media"
},
{
"defaultMessage": "Letterbox media",
"id": "settings.media_letterbox"
},
{
"defaultMessage": "User preferences",
"id": "settings.global_settings"
"id": "settings.preferences"
},
{
"defaultMessage": "Close",

View file

@ -157,10 +157,12 @@
"settings.collapsed_statuses": "Collapsed toots",
"settings.enable_collapsed": "Enable collapsed toots",
"settings.general": "General",
"settings.global_settings": "User preferences",
"settings.image_backgrounds": "Image backgrounds",
"settings.image_backgrounds_media": "Preview collapsed toot media",
"settings.image_backgrounds_users": "Give collapsed toots an image background",
"settings.media": "Media",
"settings.media_letterbox": "Letterbox media",
"settings.preferences": "User preferences",
"settings.wide_view": "Wide view (Desktop mode only)",
"status.cannot_reblog": "This post cannot be boosted",
"status.collapse": "Collapse",

View file

@ -19,6 +19,9 @@ const initialState = Immutable.fromJS({
preview_images : false,
},
},
media : {
letterbox : true,
},
});
const hydrate = (state, localSettings) => state.mergeDeep(localSettings);

View file

@ -3640,10 +3640,17 @@ button.icon-button.active i.fa-retweet {
/* Media Gallery */
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
margin-top: 15px;
margin-left: -68px;
overflow: hidden;
position: relative;
width: 100%;
width: calc(100% + 80px);
background: $base-shadow-color;
.detailed-status & {
margin-left:-10px;
width: calc(100% + 22px);
}
}
.media-gallery__item {
@ -3655,18 +3662,20 @@ button.icon-button.active i.fa-retweet {
}
.media-gallery__item-thumbnail {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: zoom-in;
display: flex;
align-items: center;
text-decoration: none;
width: 100%;
height: 100%;
&,
img {
width: 100%;
&:not(.letterbox) {
height: 100%;
object-fit: cover;
}
}
}
@ -3680,12 +3689,13 @@ button.icon-button.active i.fa-retweet {
.media-gallery__item-gifv-thumbnail {
cursor: zoom-in;
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
&:not(.letterbox) {
height: 100%;
object-fit: cover;
}
}
.media-gallery__item-thumbnail-label {
@ -3698,22 +3708,27 @@ button.icon-button.active i.fa-retweet {
/* Status Video Player */
.status__video-player {
background: $base-overlay-background;
display: flex;
align-items: center;
background: $base-shadow-color;
box-sizing: border-box;
cursor: default; /* May not be needed */
margin-top: 8px;
margin-top: 15px;
margin-left:-68px;
width: calc(100% + 80px);
overflow: hidden;
position: relative;
}
.status__video-player-video {
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
&:not(.letterbox) {
height: 100%;
object-fit: cover;
}
}
.status__video-player-expand,
@ -3754,7 +3769,9 @@ button.icon-button.active i.fa-retweet {
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-top: 8px;
margin-top: 15px;
margin-left:-68px;
width: calc(100% + 80px);
position: relative;
}

View file

@ -1,104 +1 @@
@import 'application';
.muted {
.status__content p, .status__content a {
color: lighten($ui-base-color, 35%);
}
.status__display-name strong {
color: lighten($ui-base-color, 35%);
}
}
.status time:after,
.detailed-status__datetime span:after {
font: normal normal normal 14px/1 FontAwesome;
content: "\00a0\00a0\f08e";
}
.compose-form__buttons button.active:last-child {
color:$ui-secondary-color;
background-color: $ui-highlight-color;
border-radius:3px;
}
.about-body .mascot {
display:none;
}
.screenshot-with-signup {
min-height:300px;
}
.screenshot-with-signup .closed-registrations-message,
.screenshot-with-signup form {
background-color: rgba(0,0,0,0.7);
margin:auto;
}
.screenshot-with-signup .closed-registrations-message .clock {
font-size:150%;
}
.drawer .drawer__inner {
overflow: visible;
}
.column {
// trying to fix @mdhughes safari problem
max-height:100vh;
}
.media-gallery {
height:auto !important;
max-height:250px;
position:relative;
margin-top:20px;
margin-left:-68px;
width: calc(100% + 80px);
}
.media-gallery:before{
content: "";
display: block;
padding-top: 100%;
}
.media-gallery__item,
.media-gallery .media-spoiler{
left: 0;
right: 0;
top: 0;
bottom: 0 !important;
position:absolute;
}
.media-spoiler-video:before {
content:"";
display:block;
padding-top:100%;
}
.media-spoiler-video,
.status__video-player,
.detailed-status > .media-spoiler,
.status > .media-spoiler {
height:auto !important;
max-height:250px;
position:relative;
margin-top:20px;
margin-left:-68px;
width: calc(100% + 80px) !important;
}
.status__video-player-video {
transform:unset;
}
.detailed-status > .media-spoiler,
.status > .media-spoiler {
height:250px !important;
vertical-align:middle;
}