use VideoJS like twitter does

mannynotfound · Feb 25, 2016 · 4d49a85 · 4d49a85
1 parent 12d9151
commit 4d49a85
Show file tree

Hide file tree

Showing 4 changed files with 3,761 additions and 7 deletions.
diff --git a/example/tweets.json b/example/tweets.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "moment-twitter": "^0.2.0",
     "react": "0.14.0",
     "react-dom": "0.14.0",
+    "react-videojs": "0.0.2",
     "twemoji": "^1.4.1",
     "twitter-text": "^1.13.2"
   }

diff --git a/src/components/Tweet/Media.js b/src/components/Tweet/Media.js
@@ -2,7 +2,6 @@ import React from 'react'
 import Photos from './Photos'
 import Video from './Video'
 
-
 class Media extends React.Component {
   render () {
     switch (this.props.media[0].type) {
@@ -28,5 +27,4 @@ Media.defaultProps = {
 
 Media.displayName = 'Media'
 
-
 export default Media
diff --git a/src/components/Tweet/Video.js b/src/components/Tweet/Video.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './styles'
-
+import VideoJS from 'react-videojs'
 
 class Video extends React.Component {
   render () {
@@ -12,9 +12,9 @@ class Video extends React.Component {
 
     return (
       <div className="AdaptiveMedia" style={styles.AdaptiveMedia}>
-        <video src={videoSrc} controls={!gif} autoPlay={gif} loop={gif} style={styles.video}>
+        <VideoJS src={videoSrc} controls={!gif} autoPlay={gif} loop={gif} style={styles.video}>
           {'Your browser does not support the '}<code>{'video '}</code>{'element.'}
-        </video>
+        </VideoJS>
         {gif ?
           <div className="AdaptiveMedia-badge" style={styles.AdaptiveMediaBadge}>
             GIF
@@ -36,7 +36,6 @@ Video.defaultProps = {
 
 Video.displayName = 'Video'
 
-
 export default Video