Fix #5173: Click card to embed external content (#6471)

app/javascript/mastodon/features/status/components/card.js

@@ -20,6 +20,16 @@ const getHostname = url => {
   return parser.hostname;
 };
 
+const trim = (text, len) => {
+  const cut = text.indexOf(' ', len);
+
+  if (cut === -1) {
+    return text;
+  }
+
+  return text.substring(0, cut) + (text.length > len ? '…' : '');
+};
+
 export default class Card extends React.PureComponent {
 
   static propTypes = {
@@ -33,9 +43,16 @@ export default class Card extends React.PureComponent {
   };
 
   state = {
-    width: 0,
+    width: 280,
+    embedded: false,
   };
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.card !== nextProps.card) {
+      this.setState({ embedded: false });
+    }
+  }
+
   handlePhotoClick = () => {
     const { card, onOpenMedia } = this.props;
 
@@ -57,56 +74,14 @@ export default class Card extends React.PureComponent {
     );
   };
 
-  renderLink () {
+  handleEmbedClick = () => {
-    const { card, maxDescription } = this.props;
-    const { width }  = this.state;
-    const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width);
-
-    let image    = '';
-    let provider = card.get('provider_name');
-
-    if (card.get('image')) {
-      image = (
-        <div className='status-card__image'>
-          <img src={card.get('image')} alt={card.get('title')} className='status-card__image-image' width={card.get('width')} height={card.get('height')} />
-        </div>
-      );
-    }
-
-    if (provider.length < 1) {
-      provider = decodeIDNA(getHostname(card.get('url')));
-    }
-
-    const className = classnames('status-card', { horizontal });
-
-    return (
-      <a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}>
-        {image}
-
-        <div className='status-card__content'>
-          <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
-          {!horizontal && <p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p>}
-          <span className='status-card__host'>{provider}</span>
-        </div>
-      </a>
-    );
-  }
-
-  renderPhoto () {
     const { card } = this.props;
 
-    return (
+    if (card.get('type') === 'photo') {
-      <img
+      this.handlePhotoClick();
-        className='status-card-photo'
+    } else {
-        onClick={this.handlePhotoClick}
+      this.setState({ embedded: true });
-        role='button'
+    }
-        tabIndex='0'
-        src={card.get('embed_url')}
-        alt={card.get('title')}
-        width={card.get('width')}
-        height={card.get('height')}
-      />
-    );
   }
 
   setRef = c => {
@@ -125,7 +100,7 @@ export default class Card extends React.PureComponent {
     return (
       <div
         ref={this.setRef}
-        className='status-card-video'
+        className='status-card__image status-card-video'
         dangerouslySetInnerHTML={content}
         style={{ height }}
       />
@@ -133,23 +108,76 @@ export default class Card extends React.PureComponent {
   }
 
   render () {
-    const { card } = this.props;
+    const { card, maxDescription } = this.props;
+    const { width, embedded }      = this.state;
 
     if (card === null) {
       return null;
     }
 
-    switch(card.get('type')) {
+    const provider    = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
-    case 'link':
+    const horizontal  = card.get('width') > card.get('height') && (card.get('width') + 100 >= width) || card.get('type') !== 'link';
-      return this.renderLink();
+    const className   = classnames('status-card', { horizontal });
-    case 'photo':
+    const interactive = card.get('type') !== 'link';
-      return this.renderPhoto();
+    const title       = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
-    case 'video':
+    const ratio       = card.get('width') / card.get('height');
-      return this.renderVideo();
+    const height      = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio);
-    case 'rich':
+
-    default:
+    const description = (
-      return null;
+      <div className='status-card__content'>
+        {title}
+        {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
+        <span className='status-card__host'>{provider}</span>
+      </div>
+    );
+
+    let embed     = '';
+    let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />;
+
+    if (interactive) {
+      if (embedded) {
+        embed = this.renderVideo();
+      } else {
+        let iconVariant = 'play';
+
+        if (card.get('type') === 'photo') {
+          iconVariant = 'search-plus';
+        }
+
+        embed = (
+          <div className='status-card__image'>
+            {thumbnail}
+
+            <div className='status-card__actions'>
+              <div>
+                <button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button>
+                <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>
+              </div>
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div className={className} ref={this.setRef}>
+          {embed}
+          {description}
+        </div>
+      );
+    } else if (card.get('image')) {
+      embed = (
+        <div className='status-card__image'>
+          {thumbnail}
+        </div>
+      );
     }
+
+    return (
+      <a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}>
+        {embed}
+        {description}
+      </a>
+    );
   }
 
 }

app/javascript/styles/mastodon/components.scss

@@ -2208,7 +2208,6 @@
 
 .status-card {
   display: flex;
-  cursor: pointer;
   font-size: 14px;
   border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
@@ -2217,20 +2216,58 @@
   text-decoration: none;
   overflow: hidden;
 
-  &:hover {
+  &__actions {
-    background: lighten($ui-base-color, 8%);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > div {
+      background: rgba($base-shadow-color, 0.6);
+      border-radius: 4px;
+      padding: 12px 9px;
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    button,
+    a {
+      display: inline;
+      color: $primary-text-color;
+      background: transparent;
+      border: 0;
+      padding: 0 5px;
+      text-decoration: none;
+      opacity: 0.6;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
   }
 }
 
-.status-card-video,
+a.status-card {
-.status-card-rich,
+  cursor: pointer;
-.status-card-photo {
-  margin-top: 14px;
-  overflow: hidden;
 
-  iframe {
+  &:hover {
-    width: 100%;
+    background: lighten($ui-base-color, 8%);
-    height: auto;
   }
 }
 
@@ -2258,6 +2295,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
 }
 
 .status-card__content {
@@ -2279,6 +2317,7 @@
 .status-card__image {
   flex: 0 0 100px;
   background: lighten($ui-base-color, 8%);
+  position: relative;
 }
 
 .status-card.horizontal {
@@ -2304,6 +2343,8 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  background-size: cover;
+  background-position: center center;
 }
 
 .load-more {

app/services/fetch_link_card_service.rb

@@ -94,14 +94,16 @@ class FetchLinkCardService < BaseService
       @card.image_remote_url = embed.thumbnail_url if embed.respond_to?(:thumbnail_url)
     when 'photo'
       return false unless embed.respond_to?(:url)
+
       @card.embed_url        = embed.url
       @card.image_remote_url = embed.url
       @card.width            = embed.width.presence  || 0
       @card.height           = embed.height.presence || 0
     when 'video'
-      @card.width  = embed.width.presence  || 0
+      @card.width            = embed.width.presence  || 0
-      @card.height = embed.height.presence || 0
+      @card.height           = embed.height.presence || 0
-      @card.html   = Formatter.instance.sanitize(embed.html, Sanitize::Config::MASTODON_OEMBED)
+      @card.html             = Formatter.instance.sanitize(embed.html, Sanitize::Config::MASTODON_OEMBED)
+      @card.image_remote_url = embed.thumbnail_url if embed.respond_to?(:thumbnail_url)
     when 'rich'
       # Most providers rely on <script> tags, which is a no-no
       return false
@@ -130,12 +132,12 @@ class FetchLinkCardService < BaseService
                                                scrolling: 'no',
                                                frameborder: '0')
     else
-      @card.type             = :link
+      @card.type = :link
-      @card.image_remote_url = meta_property(page, 'og:image') if meta_property(page, 'og:image')
     end
 
-    @card.title       = meta_property(page, 'og:title').presence || page.at_xpath('//title')&.content || ''
+    @card.title            = meta_property(page, 'og:title').presence || page.at_xpath('//title')&.content || ''
-    @card.description = meta_property(page, 'og:description').presence || meta_property(page, 'description') || ''
+    @card.description      = meta_property(page, 'og:description').presence || meta_property(page, 'description') || ''
+    @card.image_remote_url = meta_property(page, 'og:image') if meta_property(page, 'og:image')
 
     return if @card.title.blank? && @card.html.blank?