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

Media display improvements

Browse Source 
- 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 b525caf40a
commit ec2daae71c
11 changed files with 132 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/mastodon/features/status/components/detailed_status.js
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')} />;