mirror of
https://github.com/lunaisnotaboy/mastodon.git
synced 2024-11-21 14:23:04 +00:00
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 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,7 +66,11 @@ const Status = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status.get('media_attachments').size > 0) {
|
if (status.get('media_attachments').size > 0) {
|
||||||
media = <MediaGallery media={status.get('media_attachments')} />;
|
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 (
|
return (
|
||||||
|
|
|
@ -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
|
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)) }
|
||||||
|
|
Loading…
Reference in a new issue