Add streaming buttons for movies

package.json

@@ -19,6 +19,7 @@
         "react-dom": "^15.3.2",
         "react-infinite-scroller": "^1.0.4",
         "react-loading": "^0.0.9",
+        "react-player": "^0.14.1",
         "react-redux": "^4.4.6",
         "react-redux-form": "^1.2.4",
         "react-router": "^3.0.0",

src/public/js/components/buttons/download.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import ReactPlayer from 'react-player'
+
+import { Button, Dropdown, MenuItem, Modal } from 'react-bootstrap'
+
+export default class DownloadButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.showModal = this.showModal.bind(this);
+    this.hideModal = this.hideModal.bind(this);
+    this.state = { showModal: false };
+  }
+  showModal() {
+    this.setState({ showModal: true });
+  }
+  hideModal() {
+    this.setState({ showModal: false });
+  }
+  render() {
+    if (this.props.url === "") {
+      return null;
+    }
+
+    const infuse = `infuse://x-callback-url/play?url=${this.props.url}`;
+    return (
+      <Dropdown id="streaming-buttons" dropup>
+        <Button bsStyle="danger" className="btn-sm" href={this.props.url}>
+          <span>
+            <i className="fa fa-download" aria-hidden="true"></i> Download
+          </span>
+        </Button>
+        <Dropdown.Toggle bsStyle="danger" className="btn-sm"/>
+        <Dropdown.Menu>
+          <MenuItem eventKey="1" href={infuse}>
+            <span>
+              <i className="fa fa-play"></i> Stream with infuse
+            </span>
+          </MenuItem>
+          <MenuItem eventKey="2" onClick={this.showModal}>
+            <span>
+              <i className="fa fa-globe"></i> Stream in browser
+            </span>
+          </MenuItem>
+        </Dropdown.Menu>
+
+        <Modal show={this.state.showModal} onHide={this.hideModal}>
+          <Modal.Header closeButton>
+            <Modal.Title>
+              <i className="fa fa-globe"></i>
+              &nbsp;Browser streaming
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <div className="embed-responsive embed-responsive-16by9">
+              <ReactPlayer url={this.props.url} playing controls/>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </Dropdown>
+    );
+  }
+}

src/public/js/components/movies/list.js

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import DownloadButton from '../buttons/download'
 import TorrentsButton from './torrents'
 import ActionsButton from './actions'
 import ListPosters from '../list/posters'
@@ -8,7 +9,7 @@ import Loader from '../loader/loader'
 
 function MovieButtons(props) {
   const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
-  const hasMovie = (props.movie.polochon_url !== "")
+  const hasMovie = (props.movie.polochon_url !== "");
   return (
     <div className="list-details-buttons btn-toolbar">
       <ActionsButton
@@ -30,11 +31,7 @@ function MovieButtons(props) {
           />
       }
 
-      {hasMovie &&
+      <DownloadButton url={props.movie.polochon_url}/>
-        <a type="button" className="btn btn-primary btn-sm" href={props.movie.polochon_url}>
-          <i className="fa fa-download"></i> Download
-        </a>
-      }
 
       <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
         <i className="fa fa-external-link"></i> IMDB

yarn.lock

@@ -1320,6 +1320,10 @@ fbjs@^0.8.4:
     promise "^7.1.1"
     ua-parser-js "^0.7.9"
 
+fetch-jsonp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.0.5.tgz#fd1720a6876f557237013ec70ee969dd140486e4"
+
 file-loader:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42"
@@ -2178,6 +2182,10 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+
 loader-utils@^0.2.11, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5, loader-utils@0.2.x:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
@@ -3039,6 +3047,13 @@ query-string@^4.1.0, query-string@^4.2.2:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^4.2.3:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.1.tgz#54baada6713eafc92be75c47a731f2ebd09cd11d"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 querystring-es3@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -3104,6 +3119,14 @@ react-overlays@^0.6.10:
     react-prop-types "^0.4.0"
     warning "^3.0.0"
 
+react-player:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-0.14.1.tgz#72c45ec13bb8445cda22d0482f26aa1a3af629f0"
+  dependencies:
+    fetch-jsonp "^1.0.2"
+    load-script "^1.0.0"
+    query-string "^4.2.3"
+
 react-prop-types@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"