96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
import React from "react"
|
|
|
|
import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap"
|
|
|
|
export default class DownloadButton extends React.PureComponent {
|
|
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;
|
|
}
|
|
|
|
let btnSize = "btn-sm";
|
|
if (this.props.xs) {
|
|
btnSize = "btn-xs";
|
|
}
|
|
|
|
const infuse = `infuse://x-callback-url/play?url=${this.props.url}`;
|
|
return (
|
|
<Dropdown id="streaming-buttons" className={this.props.customClassName} dropup>
|
|
<Button bsStyle="danger" className={btnSize} href={this.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="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.Header closeButton>
|
|
<Modal.Title>
|
|
<i className="fa fa-globe"></i>
|
|
Browser streaming
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Player
|
|
url={this.props.url}
|
|
subtitles={this.props.subtitles}
|
|
/>
|
|
</Modal.Body>
|
|
</Modal>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Player extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
const subtitles = this.props.subtitles;
|
|
const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
|
|
return (
|
|
<div className="embed-responsive embed-responsive-16by9">
|
|
<video controls>
|
|
<source src={this.props.url} type="video/mp4"/>
|
|
{hasSubtitles && subtitles.toIndexedSeq().map(function(el, index) {
|
|
return (
|
|
<track
|
|
key={index}
|
|
kind="subtitles"
|
|
label={el.get("language")}
|
|
src={el.get("vvt_file")}
|
|
srcLang={el.get("language")}
|
|
/>
|
|
);
|
|
})}
|
|
</video>
|
|
</div>
|
|
);
|
|
}
|
|
}
|