Fix dimensions of preview cards, fix crash in web UI, fix warning (#9133)

app/javascript/mastodon/actions/cards.js

-import api from '../api';
-
-export const STATUS_CARD_FETCH_REQUEST = 'STATUS_CARD_FETCH_REQUEST';
-export const STATUS_CARD_FETCH_SUCCESS = 'STATUS_CARD_FETCH_SUCCESS';
-export const STATUS_CARD_FETCH_FAIL    = 'STATUS_CARD_FETCH_FAIL';
-
-export function fetchStatusCard(id) {
-  return (dispatch, getState) => {
-    if (getState().getIn(['cards', id], null) !== null) {
-      return;
-    }
-
-    dispatch(fetchStatusCardRequest(id));
-
-    api(getState).get(`/api/v1/statuses/${id}/card`).then(response => {
-      if (!response.data.url) {
-        return;
-      }
-
-      dispatch(fetchStatusCardSuccess(id, response.data));
-    }).catch(error => {
-      dispatch(fetchStatusCardFail(id, error));
-    });
-  };
-};
-
-export function fetchStatusCardRequest(id) {
-  return {
-    type: STATUS_CARD_FETCH_REQUEST,
-    id,
-    skipLoading: true,
-  };
-};
-
-export function fetchStatusCardSuccess(id, card) {
-  return {
-    type: STATUS_CARD_FETCH_SUCCESS,
-    id,
-    card,
-    skipLoading: true,
-  };
-};
-
-export function fetchStatusCardFail(id, error) {
-  return {
-    type: STATUS_CARD_FETCH_FAIL,
-    id,
-    error,
-    skipLoading: true,
-    skipAlert: true,
-  };
-};

app/javascript/mastodon/actions/statuses.js

@@ -3,7 +3,6 @@ import openDB from '../storage/db';
 import { evictStatus } from '../storage/modifier';
 
 import { deleteFromTimelines } from './timelines';
-import { fetchStatusCard } from './cards';
 import { importFetchedStatus, importFetchedStatuses, importAccount, importStatus } from './importer';
 
 export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST';
@@ -86,7 +85,6 @@ export function fetchStatus(id) {
     const skipLoading = getState().getIn(['statuses', id], null) !== null;
 
     dispatch(fetchContext(id));
-    dispatch(fetchStatusCard(id));
 
     if (skipLoading) {
       return;

app/javascript/mastodon/components/status_content.js

@@ -159,7 +159,7 @@ export default class StatusContent extends React.PureComponent {
     }
 
     const readMoreButton = (
-      <button className='status__content__read-more-button' onClick={this.props.onClick}>
+      <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' /><i className='fa fa-fw fa-angle-right' />
       </button>
     );
@@ -197,6 +197,7 @@ export default class StatusContent extends React.PureComponent {
         <div
           ref={this.setRef}
           tabIndex='0'
+          key='content'
           className={classNames}
           style={directionStyle}
           dangerouslySetInnerHTML={content}

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

@@ -59,7 +59,7 @@ export default class Card extends React.PureComponent {
     card: ImmutablePropTypes.map,
     maxDescription: PropTypes.number,
     onOpenMedia: PropTypes.func.isRequired,
-    compact: PropTypes.boolean,
+    compact: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -120,7 +120,7 @@ export default class Card extends React.PureComponent {
     const content   = { __html: addAutoPlay(card.get('html')) };
     const { width } = this.state;
     const ratio     = card.get('width') / card.get('height');
-    const height    = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio);
+    const height    = width / ratio;
 
     return (
       <div
@@ -145,8 +145,8 @@ export default class Card extends React.PureComponent {
     const interactive = card.get('type') !== 'link';
     const className   = classnames('status-card', { horizontal, compact, interactive });
     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>;
-    const ratio       = compact ? 16 / 9 : card.get('width') / card.get('height');
-    const height      = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio);
+    const ratio       = card.get('width') / card.get('height');
+    const height      = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 
     const description = (
       <div className='status-card__content'>

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

@@ -8,7 +8,7 @@ import MediaGallery from '../../../components/media_gallery';
 import AttachmentList from '../../../components/attachment_list';
 import { Link } from 'react-router-dom';
 import { FormattedDate, FormattedNumber } from 'react-intl';
-import CardContainer from '../containers/card_container';
+import Card from './card';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from '../../video';
 
@@ -80,7 +80,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         );
       }
     } else if (status.get('spoiler_text').length === 0) {
-      media = <CardContainer onOpenMedia={this.props.onOpenMedia} statusId={status.get('id')} />;
+      media = <Card onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
     }
 
     if (status.get('application')) {

app/javascript/mastodon/features/status/containers/card_container.js

-import { connect } from 'react-redux';
-import Card from '../components/card';
-
-const mapStateToProps = (state, { statusId }) => ({
-  card: state.getIn(['statuses', statusId, 'card'], null),
-});
-
-export default connect(mapStateToProps)(Card);

app/javascript/mastodon/reducers/cards.js

-import { STATUS_CARD_FETCH_SUCCESS } from '../actions/cards';
-
-import { Map as ImmutableMap, fromJS } from 'immutable';
-
-const initialState = ImmutableMap();
-
-export default function cards(state = initialState, action) {
-  switch(action.type) {
-  case STATUS_CARD_FETCH_SUCCESS:
-    return state.set(action.id, fromJS(action.card));
-  default:
-    return state;
-  }
-};

app/javascript/mastodon/reducers/statuses.js

@@ -10,7 +10,6 @@ import {
   STATUS_REVEAL,
   STATUS_HIDE,
 } from '../actions/statuses';
-import { STATUS_CARD_FETCH_SUCCESS } from '../actions/cards';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
 import { Map as ImmutableMap, fromJS } from 'immutable';
@@ -66,8 +65,6 @@ export default function statuses(state = initialState, action) {
     });
   case TIMELINE_DELETE:
     return deleteStatus(state, action.id, action.references);
-  case STATUS_CARD_FETCH_SUCCESS:
-    return state.setIn([action.id, 'card'], fromJS(action.card));
   default:
     return state;
   }