ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Refactor the player and remove infuse

Browse Source
This commit is contained in:
Grégoire Delattre 2019-05-18 21:42:07 +02:00
parent c5cafacbf1
commit fb84e4dbad
1 changed files with 70 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/js/components/buttons/download.js
View File

@ -1,95 +1,81 @@
import React from "react" import React, { useState } from "react"
import PropTypes from "prop-types"
import { List } from "immutable"
import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap" import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap"
export default class DownloadButton extends React.PureComponent { const DownloadButton = (props) => {
constructor(props) { if (props.url === "") { return null; }
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;
}
let btnSize = "btn-sm"; const [showModal, setShowModal] = useState(false);
if (this.props.xs) {
btnSize = "btn-xs";
}
const infuse = `infuse://x-callback-url/play?url=${this.props.url}`; let btnSize = "btn-sm";
return ( if (props.xs) {
<Dropdown id="streaming-buttons" className={this.props.customClassName} dropup> btnSize = "btn-xs";
<Button bsStyle="danger" className={btnSize} href={this.props.url}> }
return (
<Dropdown id="streaming-buttons" className={props.customClassName} dropup>
<Button bsStyle="danger" className={btnSize} href={props.url}>
<span>
<i className="fa fa-download" aria-hidden="true"></i> Download
</span>
</Button>
<Dropdown.Toggle bsStyle="danger" className={btnSize}/>
<Dropdown.Menu>
<MenuItem eventKey="2" onClick={() => setShowModal(true)}>
<span> <span>
<i className="fa fa-download" aria-hidden="true"></i> Download <i className="fa fa-globe"></i> Stream in browser
</span> </span>
</Button> </MenuItem>
<Dropdown.Toggle bsStyle="danger" className={btnSize}/> </Dropdown.Menu>
<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} dialogClassName="player-modal"> <Modal show={showModal} onHide={() => setShowModal(false)} dialogClassName="player-modal">
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title> <Modal.Title>
<i className="fa fa-globe"></i> <i className="fa fa-globe"></i>
&nbsp;Browser streaming &nbsp;Browser streaming
</Modal.Title> </Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Player <Player
url={this.props.url} url={props.url}
subtitles={this.props.subtitles} subtitles={props.subtitles}
/> />
</Modal.Body> </Modal.Body>
</Modal> </Modal>
</Dropdown> </Dropdown>
); );
}
} }
DownloadButton.propTypes = {
customClassName: PropTypes.string,
xs: PropTypes.bool,
url: PropTypes.string.isRequired,
subtitles: PropTypes.instanceOf(List),
};
export default DownloadButton;
class Player extends React.PureComponent { const Player = (props) => {
constructor(props) { const subtitles = props.subtitles;
super(props); const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
} return (
render() { <div className="embed-responsive embed-responsive-16by9">
const subtitles = this.props.subtitles; <video controls>
const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0); <source src={props.url} type="video/mp4"/>
return ( {hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
<div className="embed-responsive embed-responsive-16by9"> <track
<video controls> key={index}
<source src={this.props.url} type="video/mp4"/> kind="subtitles"
{hasSubtitles && subtitles.toIndexedSeq().map(function(el, index) { label={el.get("language")}
return ( src={el.get("vvt_file")}
<track srcLang={el.get("language")}
key={index} />
kind="subtitles" ))}
label={el.get("language")} </video>
src={el.get("vvt_file")} </div>
srcLang={el.get("language")} );
/>
);
})}
</video>
</div>
);
}
} }
Player.propTypes = {
subtitles: PropTypes.instanceOf(List),
url: PropTypes.string.isRequired,
};