Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Redesign video player (#4911)

Browse source 
* 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:
Eugen Rochko 2017-09-14 03:39:10 +02:00 • committed by GitHub
parent af00220d79
commit 2bbf987a0a
46 changed files with 1064 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/mastodon/features/ui/components/video_modal.js
View file

@ -1,35 +1,29 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ExtendedVideoPlayer from '../../../components/extended_video_player';
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button';
import Video from '../../video';
import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
@injectIntl
export default class VideoModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
time: PropTypes.number,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { media, intl, time, onClose } = this.props;
const url = media.get('url');
const { media, time, onClose } = this.props;
return (
<div className='modal-root__modal media-modal'>
<div>
<div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
<ExtendedVideoPlayer src={url} muted={false} controls time={time} />
<Video
preview={media.get('preview_url')}
src={media.get('url')}
startTime={time}
onCloseVideo={onClose}
/>
</div>
</div>
);