mastofe

commit: 5342629a0a6c58532b48a2669d4aca9fdce35170
parent: bd5ad304bac69b34a3c223e9baac532106db7dd8
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sat, 17 Sep 2016 18:05:02 +0200

Adding webm playback to UI

Diffstat:
M
app/assets/javascripts/components/components/status.jsx
7
++++++-
A
app/assets/javascripts/components/components/video_player.jsx
21
+++++++++++++++++++++
M
app/views/api/statuses/show.rabl
2
+-

3 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
@@ -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,7 +66,11 @@ const Status = React.createClass({
     }
 
     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 (
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx
@@ -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;
diff --git a/app/views/api/statuses/show.rabl b/app/views/api/statuses/show.rabl
@@ -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)) }