89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import React, { useState } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { List } from "immutable"
|
|
|
|
import Modal from "react-bootstrap/Modal"
|
|
|
|
export const DownloadAndStream = ({ url, name, subtitles }) => {
|
|
if (!url || url === "") { return null; }
|
|
|
|
return (
|
|
<span>
|
|
<DownloadButton url={url} />
|
|
<StreamButton url={url} name={name} subtitles={subtitles} />
|
|
</span>
|
|
);
|
|
}
|
|
DownloadAndStream.propTypes = {
|
|
url: PropTypes.string,
|
|
name: PropTypes.string,
|
|
subtitles: PropTypes.instanceOf(List),
|
|
};
|
|
|
|
const DownloadButton = ({ url }) => (
|
|
<h5 className="d-inline">
|
|
<a href={url} className="btn btn-sm btn-primary m-1">
|
|
<i className="fa fa-download mr-1" />
|
|
Download
|
|
</a>
|
|
</h5>
|
|
);
|
|
DownloadButton.propTypes = { url: PropTypes.string.isRequired };
|
|
|
|
const StreamButton = ({ name, url, subtitles }) => {
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<h5 className="d-inline">
|
|
<a
|
|
href="#"
|
|
className="btn btn-sm btn-primary m-1 clickable"
|
|
onClick={(e) => { e.preventDefault(); setShowModal(true) }}>
|
|
<i className="fa fa-play-circle mr-1" />
|
|
Play
|
|
</a>
|
|
</h5>
|
|
|
|
<Modal show={showModal} onHide={() => setShowModal(false)} size="lg" centered>
|
|
<Modal.Header closeButton>{name}</Modal.Header>
|
|
<Modal.Body>
|
|
<Player url={url} subtitles={subtitles} />
|
|
</Modal.Body>
|
|
</Modal>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
StreamButton.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
subtitles: PropTypes.instanceOf(List),
|
|
};
|
|
|
|
const Player = ({ url, subtitles }) => {
|
|
const hasSubtitles = !(subtitles === null || subtitles.size === 0);
|
|
return (
|
|
<div className="embed-responsive embed-responsive-16by9">
|
|
<video className="embed-responsive-item" controls>
|
|
<source src={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,
|
|
};
|
|
Player.defaultProps = {
|
|
subtitles: List(),
|
|
};
|