Merge pull request #136 from 6ea86b96/autoplay

Fix autoplaying

ui/js/actions/content.js

@@ -209,7 +209,7 @@ export function doLoadVideo(uri) {
   }
 }
 
-export function doPurchaseUri(uri) {
+export function doPurchaseUri(uri, purchaseModalName) {
   return function(dispatch, getState) {
     const state = getState()
     const balance = selectBalance(state)
@@ -244,7 +244,7 @@ export function doPurchaseUri(uri) {
     if (cost > balance) {
       dispatch(doOpenModal('notEnoughCredits'))
     } else {
-      dispatch(doOpenModal('affirmPurchase'))
+      dispatch(doOpenModal(purchaseModalName))
     }
 
     return Promise.resolve()

ui/js/component/fileActions/index.js

@@ -66,7 +66,7 @@ const perform = (dispatch) => ({
     dispatch(doDeleteFile(fileInfo, deleteFromComputer))
   },
   openModal: (modal) => dispatch(doOpenModal(modal)),
-  startDownload: (uri) => dispatch(doPurchaseUri(uri)),
+  startDownload: (uri) => dispatch(doPurchaseUri(uri, 'affirmPurchase')),
   loadVideo: (uri) => dispatch(doLoadVideo(uri)),
 })
 

ui/js/component/video/index.js

@@ -47,7 +47,7 @@ const makeSelect = () => {
 
 const perform = (dispatch) => ({
   loadVideo: (uri) => dispatch(doLoadVideo(uri)),
-  purchaseUri: (uri) => dispatch(doPurchaseUri(uri)),
+  purchaseUri: (uri) => dispatch(doPurchaseUri(uri, 'affirmPurchaseAndPlay')),
   closeModal: () => dispatch(doCloseModal()),
 })
 

ui/js/component/video/view.jsx

@@ -52,13 +52,12 @@ class VideoPlayButton extends React.Component {
             className="video__play-button"
             icon="icon-play"
             onClick={this.onWatchClick.bind(this)} />
-      {modal}
       <Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={closeModal}>
         You don't have enough LBRY credits to pay for this stream.
       </Modal>
       <Modal
         type="confirm"
-        isOpen={modal == 'affirmPurchase'}
+        isOpen={modal == 'affirmPurchaseAndPlay'}
         contentLabel="Confirm Purchase"
         onConfirmed={this.onPurchaseConfirmed.bind(this)}
         onAborted={closeModal}>
@@ -72,8 +71,6 @@ class VideoPlayButton extends React.Component {
   }
 }
 
-const plyr = require('plyr')
-
 class Video extends React.Component {
   constructor(props) {
     super(props)
@@ -114,7 +111,7 @@ class Video extends React.Component {
         isPlaying || isLoading ?
           (!isReadyToPlay ?
             <span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
-            <VideoPlayer poster={metadata.thumbnail} autoplay={isPlaying} downloadPath={fileInfo.download_path} />) :
+            <VideoPlayer filename={fileInfo.file_name} poster={metadata.thumbnail} downloadPath={fileInfo.download_path} />) :
         <div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>
           <VideoPlayButton startPlaying={this.startPlaying.bind(this)} {...this.props} />
         </div>
@@ -123,18 +120,28 @@ class Video extends React.Component {
   }
 }
 
+const from = require('from2')
+const player = require('render-media')
+const fs = require('fs')
+
 class VideoPlayer extends React.Component {
   componentDidMount() {
     const elem = this.refs.video
     const {
-      autoplay,
       downloadPath,
       contentType,
+      filename,
     } = this.props
-    const players = plyr.setup(elem)
-    if (autoplay) {
-      players[0].play()
+    const file = {
+      name: filename,
+      createReadStream: (opts) => {
+        return fs.createReadStream(downloadPath, opts)
+      }
     }
+    player.render(file, elem, {
+      autoplay: true,
+      controls: true,
+    })
   }
 
   render() {
@@ -145,7 +152,7 @@ class VideoPlayer extends React.Component {
     } = this.props
 
     return (
-      <video controls id="video" ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
+      <video controls ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
         <source src={downloadPath} type={contentType} />
       </video>
     )

ui/package.json

@@ -22,9 +22,9 @@
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
+    "from2": "^2.3.0",
     "jshashes": "^1.0.6",
     "node-sass": "^3.8.0",
-    "plyr": "^2.0.12",
     "rc-progress": "^2.0.6",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
@@ -33,6 +33,7 @@
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0",
+    "render-media": "^2.10.0",
     "reselect": "^3.0.0"
   },
   "devDependencies": {

ui/webpack.config.js

@@ -42,7 +42,11 @@ module.exports = {
           cacheDirectory: true,
           presets:[ 'es2015', 'react', 'stage-2' ]
         }
-      }
+      },
+      {
+        test: /mime\.json$/,
+        loader: 'json',
+      },
     ]
   },
   target: 'electron-main',

ui/webpack.dev.config.js

@@ -48,7 +48,11 @@ module.exports = {
           cacheDirectory: true,
           presets:[ 'es2015', 'react', 'stage-2' ]
         }
-      }
+      },
+      {
+        test: /mime\.json$/,
+        loader: 'json',
+      },
     ]
   },
   target: 'electron-main',