Adding webm playback to UI

master
Eugen Rochko 8 years ago
parent bd5ad304ba
commit 5342629a0a
  1. 5
      app/assets/javascripts/components/components/status.jsx
  2. 21
      app/assets/javascripts/components/components/video_player.jsx
  3. 2
      app/views/api/statuses/show.rabl

@ -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…
Cancel
Save