Remove react-player to use standard <video> tags

react-player does not support subtitles, the standard <video> tag does
This commit is contained in:
Grégoire Delattre 2017-05-21 13:35:04 +02:00
parent 1c7421b182
commit eb9e609c02
5 changed files with 43 additions and 23 deletions

View File

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

View File

@ -1,5 +1,4 @@
import React from 'react' import React from 'react'
import ReactPlayer from 'react-player'
import { Button, Dropdown, MenuItem, Modal } from 'react-bootstrap' import { Button, Dropdown, MenuItem, Modal } from 'react-bootstrap'
@ -56,12 +55,46 @@ export default class DownloadButton extends React.Component {
</Modal.Title> </Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div className="embed-responsive embed-responsive-16by9"> <Player
<ReactPlayer url={this.props.url} playing controls/> url={this.props.url}
</div> subtitles={this.props.subtitles}
/>
</Modal.Body> </Modal.Body>
</Modal> </Modal>
</Dropdown> </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>
);
}
}

View File

@ -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}> <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
<i className="fa fa-external-link"></i> IMDB <i className="fa fa-external-link"></i> IMDB

View File

@ -182,6 +182,7 @@ function Episode(props) {
})} })}
<DownloadButton <DownloadButton
url={props.data.polochon_url} url={props.data.polochon_url}
subtitles={props.data.subtitles}
customClassName="episode-button" customClassName="episode-button"
xs xs
/> />

View File

@ -1322,10 +1322,6 @@ fbjs@^0.8.4:
promise "^7.1.1" promise "^7.1.1"
ua-parser-js "^0.7.9" 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: file-loader:
version "0.9.0" version "0.9.0"
resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42" 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" pinkie-promise "^2.0.0"
strip-bom "^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: 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" version "0.2.16"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d" 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" version "6.3.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442" 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" version "4.3.1"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.1.tgz#54baada6713eafc92be75c47a731f2ebd09cd11d" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.1.tgz#54baada6713eafc92be75c47a731f2ebd09cd11d"
dependencies: dependencies:
@ -3096,14 +3088,6 @@ react-overlays@^0.6.10:
react-prop-types "^0.4.0" react-prop-types "^0.4.0"
warning "^3.0.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: react-prop-types@^0.4.0:
version "0.4.0" version "0.4.0"
resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0" resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"