Styled components

example/app.js

@@ -2,16 +2,22 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import Tweet from '../src/components/Tweet/Tweet.js';
 import './_app.css';
-import tweets from './tweets'
+import tweets from './tweets';
 
 const linkProps = { target: '_blank' };
 
-ReactDom.render((
-  <div className="ExamplePage" style={{'width': '590px', 'margin': '0 auto'}}>
-    <div className="tweet-stream" style={{'width': '100%'}}>
-      {tweets.map((t, i) => (
-        <Tweet autoPlay={true} data={t} key={i} linkProps={linkProps} />
-      ))}
+const filteredTweets = tweets.filter(tweet => {
+  if (tweet.id === 953583426153713665) {
+    return tweet;
+  }
+  return null;
+});
+
+ReactDom.render(
+  <div className="ExamplePage" style={{ width: '590px', margin: '0 auto' }}>
+    <div className="tweet-stream" style={{ width: '100%' }}>
+      {filteredTweets.map((t, i) => <Tweet autoPlay data={t} key={i} linkProps={linkProps} />)}
     </div>
-  </div>
-), document.getElementById('container'))
+  </div>,
+  document.getElementById('container')
+);

package.json

@@ -48,6 +48,7 @@
     "babel-preset-es2015": "6.24.1",
     "react-video-wrapper": "1.0.3",
     "react-videojs": "0.0.3",
+    "styled-components": "^3.2.3",
     "twemoji": "1.4.1",
     "twitter-text": "1.13.2"
   }

src/components/Tweet/Video.js

@@ -1,54 +1,89 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './styles'
-import VideoJS from 'react-videojs'
+import React from 'react';
+import PropTypes from 'prop-types';
+import VideoJS from 'react-videojs';
+import styled from 'styled-components';
+import styles from './styles';
+
+const videoStyle = `
+  width: 100%;
+  vertical-align: bottom;
+  max-height: 508px;
+  object-fit: contain;
+  background: #000000;
+`;
+
+let VideoComponent = styled.video`
+  ${videoStyle};
+`;
+
+if (typeof videojs !== 'undefined') {
+  VideoComponent = styled.VideoJS`
+    ${videoStyle};
+  `;
+}
+
+const AdaptiveMedia = styled.div`
+  display: inline-block;
+  max-height: 508px;
+  max-width: 508px;
+  margin: 10px 0 0 0;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  vertical-align: top;
+  text-align: center;
+  width: 100%;
+`;
+
+const AdaptiveMediaBadge = styled.div`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  bottom: 52px;
+  left: 80px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  color: #fff;
+  height: 20px;
+  line-height: 20px;
+  font-weight: 700;
+  padding: 0 5px;
+  position: absolute;
+  z-index: 1;
+`;
 
 class Video extends React.Component {
-  render () {
-    let {media, gif, autoPlay} = this.props, videoSrc = ''
+  render() {
+    const { media, gif, autoPlay } = this.props;
+    let videoSrc = '';
 
-    media[0].video_info.variants.forEach( v => {
+    media[0].video_info.variants.forEach(v => {
       if (v.url.indexOf('.mp4') > -1) {
-        videoSrc = v.url
+        videoSrc = v.url;
       }
-    })
-
-    let VideoComponent = (
-      <video src={videoSrc} controls={!gif} autoPlay={gif || autoPlay} loop={gif} style={styles.video}>
-        {'Your browser does not support the '}<code>{'video '}</code>{'element.'}
-      </video>
-    )
-
-    if (typeof videojs !== 'undefined') {
-      VideoComponent = (
-        <VideoJS src={videoSrc} controls={!gif} autoPlay={gif || autoPlay} loop={gif} style={styles.video}>
-          {'Your browser does not support the '}<code>{'video '}</code>{'element.'}
-        </VideoJS>
-      )
-    }
-
+    });
     return (
-      <div className="AdaptiveMedia" style={styles.AdaptiveMedia}>
-        {VideoComponent}
-        {gif ?
-          <div className="AdaptiveMedia-badge" style={styles.AdaptiveMediaBadge}>
-            GIF
-          </div> : null}
-      </div>
-    )
+      <AdaptiveMedia>
+        <VideoComponent src={videoSrc} controls={!gif} autoPlay={gif || autoPlay} loop={gif}>
+          {'Your browser does not support the '}
+          <code>video </code>
+          {'element.'}
+        </VideoComponent>
+        {gif ? <AdaptiveMediaBadge>GIF</AdaptiveMediaBadge> : null}
+      </AdaptiveMedia>
+    );
   }
 }
 
 Video.propTypes = {
-  'media': PropTypes.array,
-  'gif': PropTypes.bool
-}
+  media: PropTypes.array,
+  gif: PropTypes.bool,
+};
 
 Video.defaultProps = {
-  'media': [],
-  'gif': false
-}
+  media: [],
+  gif: false,
+};
 
-Video.displayName = 'Video'
+Video.displayName = 'Video';
 
-export default Video
+export default Video;