Media display improvements

- built in fullwidth styling - letterbox settings toggle - media no longer counts towards height when making toot-collapsing measurements
2017-06-30 02:15:18 -07:00
parent b525caf40a
commit ec2daae71c
11 changed files with 132 additions and 144 deletions
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -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 (
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -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';
      }

--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -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}