Redesign video player (#4911)
* Redesign video player * Use new video player on static public pages too * Use media gallery component on static public pages too * Pause video when hiding it * Full-screen sizing on WebKit * Add aria labels to video player buttons * Display link card on public status page * Fix fullscreen from modal sizing issue * Remove contain: strict property to fix fullscreen from columns
This commit is contained in:
		
					parent
					
						
							
								af00220d79
							
						
					
				
			
			
				commit
				
					
						2bbf987a0a
					
				
			
		
					 46 changed files with 1064 additions and 217 deletions
				
			
		|  | @ -1,4 +1,5 @@ | |||
| import React from 'react'; | ||||
| import PropTypes from 'prop-types'; | ||||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
| import punycode from 'punycode'; | ||||
| import classnames from 'classnames'; | ||||
|  | @ -22,10 +23,15 @@ export default class Card extends React.PureComponent { | |||
| 
 | ||||
|   static propTypes = { | ||||
|     card: ImmutablePropTypes.map, | ||||
|     maxDescription: PropTypes.number, | ||||
|   }; | ||||
| 
 | ||||
|   static defaultProps = { | ||||
|     maxDescription: 50, | ||||
|   }; | ||||
| 
 | ||||
|   renderLink () { | ||||
|     const { card } = this.props; | ||||
|     const { card, maxDescription } = this.props; | ||||
| 
 | ||||
|     let image    = ''; | ||||
|     let provider = card.get('provider_name'); | ||||
|  | @ -52,7 +58,7 @@ export default class Card extends React.PureComponent { | |||
| 
 | ||||
|         <div className='status-card__content'> | ||||
|           <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong> | ||||
|           <p className='status-card__description'>{(card.get('description') || '').substring(0, 50)}</p> | ||||
|           <p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p> | ||||
|           <span className='status-card__host'>{provider}</span> | ||||
|         </div> | ||||
|       </a> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue