From eb9e609c02c1a0b1924b07991effc4c4a3c5bee6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Sun, 21 May 2017 13:35:04 +0200
Subject: [PATCH] Remove react-player to use standard <video> tags

react-player does not support subtitles, the standard <video> tag does
---
 package.json                                 |  1 -
 src/public/js/components/buttons/download.js | 41 ++++++++++++++++++--
 src/public/js/components/movies/list.js      |  5 ++-
 src/public/js/components/shows/details.js    |  1 +
 yarn.lock                                    | 18 +--------
 5 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 5543d11..f82fe71 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
         "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",
diff --git a/src/public/js/components/buttons/download.js b/src/public/js/components/buttons/download.js
index 1089be6..8c18ece 100644
--- a/src/public/js/components/buttons/download.js
+++ b/src/public/js/components/buttons/download.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import ReactPlayer from 'react-player'
 
 import { Button, Dropdown, MenuItem, Modal } from 'react-bootstrap'
 
@@ -56,12 +55,46 @@ export default class DownloadButton extends React.Component {
             </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <div className="embed-responsive embed-responsive-16by9">
-              <ReactPlayer url={this.props.url} playing controls/>
-            </div>
+            <Player
+              url={this.props.url}
+              subtitles={this.props.subtitles}
+            />
           </Modal.Body>
         </Modal>
       </Dropdown>
     );
   }
 }
+
+class Player extends React.Component {
+  constructor(props) {
+    super(props);
+    var subtitles = [];
+    if (props.subtitles && props.subtitles.length) {
+      subtitles = props.subtitles;
+    }
+    this.state = {
+      subtitles: subtitles,
+    };
+  }
+  render() {
+    return (
+      <div className="embed-responsive embed-responsive-16by9">
+        <video controls>
+          <source src={this.props.url} type="video/mp4"/>
+          {this.props.subtitles.map(function(el, index) {
+            return (
+              <track
+                key={index}
+                kind="subtitles"
+                label={el.language}
+                src={el.vvt_file}
+                srcLang={el.language}
+              />
+            );
+          })}
+        </video>
+      </div>
+    );
+  }
+}
diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index 402db75..6014cb2 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -32,7 +32,10 @@ function MovieButtons(props) {
           />
       }
 
-      <DownloadButton url={props.movie.polochon_url}/>
+      <DownloadButton
+        url={props.movie.polochon_url}
+        subtitles={props.movie.subtitles}
+      />
 
       <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
         <i className="fa fa-external-link"></i> IMDB
diff --git a/src/public/js/components/shows/details.js b/src/public/js/components/shows/details.js
index 220ce43..81f0332 100644
--- a/src/public/js/components/shows/details.js
+++ b/src/public/js/components/shows/details.js
@@ -182,6 +182,7 @@ function Episode(props) {
           })}
           <DownloadButton
             url={props.data.polochon_url}
+            subtitles={props.data.subtitles}
             customClassName="episode-button"
             xs
           />
diff --git a/yarn.lock b/yarn.lock
index 2f85230..67026c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1322,10 +1322,6 @@ 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,10 +2174,6 @@ 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.x, 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:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
@@ -3024,7 +3016,7 @@ qs@~6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
 
-query-string@^4.1.0, query-string@^4.2.2, query-string@^4.2.3:
+query-string@^4.1.0, query-string@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.1.tgz#54baada6713eafc92be75c47a731f2ebd09cd11d"
   dependencies:
@@ -3096,14 +3088,6 @@ 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"