Adding webm playback to UI

This commit is contained in:
Eugen Rochko 2016-09-17 18:05:02 +02:00
parent bd5ad304ba
commit 5342629a0a
3 changed files with 28 additions and 2 deletions

View File

@ -5,6 +5,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
import IconButton from './icon_button'; import IconButton from './icon_button';
import DisplayName from './display_name'; import DisplayName from './display_name';
import MediaGallery from './media_gallery'; import MediaGallery from './media_gallery';
import VideoPlayer from './video_player';
import { hashHistory } from 'react-router'; import { hashHistory } from 'react-router';
const Status = React.createClass({ const Status = React.createClass({
@ -65,8 +66,12 @@ const Status = React.createClass({
} }
if (status.get('media_attachments').size > 0) { 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')} />; media = <MediaGallery media={status.get('media_attachments')} />;
} }
}
return ( return (
<div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}> <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}>

View File

@ -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;

View File

@ -18,7 +18,7 @@ child :account do
end end
child :media_attachments, object_root: false do 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(:url) { |media| full_asset_url(media.file.url) }
node(:preview_url) { |media| full_asset_url(media.file.url(:small)) } node(:preview_url) { |media| full_asset_url(media.file.url(:small)) }