forked from fedi/mastodon
Adding webm playback to UI
This commit is contained in:
parent
bd5ad304ba
commit
5342629a0a
|
@ -5,6 +5,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|||
import IconButton from './icon_button';
|
||||
import DisplayName from './display_name';
|
||||
import MediaGallery from './media_gallery';
|
||||
import VideoPlayer from './video_player';
|
||||
import { hashHistory } from 'react-router';
|
||||
|
||||
const Status = React.createClass({
|
||||
|
@ -65,8 +66,12 @@ const Status = React.createClass({
|
|||
}
|
||||
|
||||
if (status.get('media_attachments').size > 0) {
|
||||
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
|
||||
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />;
|
||||
} else {
|
||||
media = <MediaGallery media={status.get('media_attachments')} />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}>
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||
|
||||
const VideoPlayer = React.createClass({
|
||||
propTypes: {
|
||||
media: ImmutablePropTypes.map.isRequired
|
||||
},
|
||||
|
||||
mixins: [PureRenderMixin],
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000' }}>
|
||||
<video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={true} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
export default VideoPlayer;
|
|
@ -18,7 +18,7 @@ child :account do
|
|||
end
|
||||
|
||||
child :media_attachments, object_root: false do
|
||||
attributes :id, :remote_url
|
||||
attributes :id, :remote_url, :type
|
||||
|
||||
node(:url) { |media| full_asset_url(media.file.url) }
|
||||
node(:preview_url) { |media| full_asset_url(media.file.url(:small)) }
|
||||
|
|
Loading…
Reference in a new issue