Switch to https://github.com/Selz/plyr video player (recommended by @fillerino).

ui/dist/index.html

@@ -7,7 +7,7 @@
         <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
-        <link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
+        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/js/actions/content.js

@@ -268,8 +268,15 @@ export function doWatchVideo() {
     const alreadyDownloading = !!downloadingByUri[uri]
     const { cost } = costInfo
 
+    // BUG if you delete a file from the file system system you're going to be
+    // asked to pay for it again. We need to check if the file is in the blobs
+    // here and then dispatch doLoadVideo() which will reconstruct it again from
+    // the blobs. Or perhaps there's another way to see if a file was already
+    // purchased?
+
     // we already fully downloaded the file
     if (fileInfo && fileInfo.completed) {
+      dispatch(doLoadVideo())
       return Promise.resolve()
     }
 

ui/js/component/video/view.jsx

@@ -7,6 +7,58 @@ import FilePrice from 'component/filePrice'
 import Link from 'component/link';
 import Modal from 'component/modal';
 
+class WatchLink extends React.Component {
+  confirmPurchaseClick() {
+    this.props.closeModal()
+    this.props.startPlaying()
+    this.props.loadVideo()
+  }
+
+  render() {
+    const {
+      button,
+      label,
+      className,
+      onWatchClick,
+      metadata,
+      metadata: {
+        title,
+      },
+      uri,
+      modal,
+      closeModal,
+      isLoading,
+      costInfo,
+      fileInfo,
+    } = this.props
+
+    return (<div>
+      <Link button={ button ? button : null }
+            disabled={isLoading || costInfo.cost == undefined || fileInfo === undefined}
+            label={label ? label : ""}
+            className="video__play-button"
+            icon="icon-play"
+            onClick={onWatchClick} />
+      {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'}
+        contentLabel="Confirm Purchase"
+        onConfirmed={this.confirmPurchaseClick.bind(this)}
+        onAborted={closeModal}>
+        Are you sure you'd like to buy <strong>{this.props.metadata.title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
+      </Modal>
+      <Modal
+        isOpen={modal == 'timedOut'} onConfirmed={closeModal} contentLabel="Timed Out">
+        Sorry, your download timed out :(
+      </Modal>
+    </div>);
+  }
+}
+
 const plyr = require('plyr')
 
 class Video extends React.Component {

ui/package.json

@@ -24,6 +24,7 @@
     "babel-preset-react": "^6.11.1",
     "mediaelement": "^2.23.4",
     "node-sass": "^3.8.0",
+    "plyr": "^2.0.12",
     "rc-progress": "^2.0.6",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
@@ -32,8 +33,7 @@
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.0",
-    "videostream": "^2.4.2"
+    "reselect": "^3.0.0"
   },
   "devDependencies": {
     "babel": "^6.5.2",