Fix dimensions of preview cards, fix crash in web UI, fix warning (#9133)
This commit is contained in:
		
					parent
					
						
							
								26fe37c414
							
						
					
				
			
			
				commit
				
					
						9c38c5daa3
					
				
			
		
					 8 changed files with 8 additions and 86 deletions
				
			
		|  | @ -1,52 +0,0 @@ | |||
| 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, | ||||
|   }; | ||||
| }; | ||||
|  | @ -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; | ||||
|  |  | |||
|  | @ -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} | ||||
|  |  | |||
|  | @ -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'> | ||||
|  |  | |||
|  | @ -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')) { | ||||
|  |  | |||
|  | @ -1,8 +0,0 @@ | |||
| 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); | ||||
|  | @ -1,14 +0,0 @@ | |||
| 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; | ||||
|   } | ||||
| }; | ||||
|  | @ -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; | ||||
|   } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue