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"
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;
}
const DownloadButton = (props) => {
if (props.url === "") { return null; }
let btnSize = "btn-sm";
if (this.props.xs) {
btnSize = "btn-xs";
}
const [showModal, setShowModal] = useState(false);
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}>
let btnSize = "btn-sm";
if (props.xs) {
btnSize = "btn-xs";
}
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>
<i className="fa fa-download" aria-hidden="true"></i> Download
<i className="fa fa-globe"></i> Stream in browser
</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>
</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>
&nbsp;Browser streaming
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Player
url={this.props.url}
subtitles={this.props.subtitles}
/>
</Modal.Body>
</Modal>
</Dropdown>
);
}
<Modal show={showModal} onHide={() => setShowModal(false)} dialogClassName="player-modal">
<Modal.Header closeButton>
<Modal.Title>
<i className="fa fa-globe"></i>
&nbsp;Browser streaming
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Player
url={props.url}
subtitles={props.subtitles}
/>
</Modal.Body>
</Modal>
</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 {
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>
);
}
const Player = (props) => {
const subtitles = props.subtitles;
const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
return (
<div className="embed-responsive embed-responsive-16by9">
<video controls>
<source src={props.url} type="video/mp4"/>
{hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
<track
key={index}
kind="subtitles"
label={el.get("language")}
src={el.get("vvt_file")}
srcLang={el.get("language")}
/>
))}
</video>
</div>
);
}
Player.propTypes = {
subtitles: PropTypes.instanceOf(List),
url: PropTypes.string.isRequired,
};