97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
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.array,
|
|
};
|
|
|
|
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.array,
|
|
};
|
|
|
|
const Player = ({ url, subtitles }) => {
|
|
const subs = subtitles || [];
|
|
|
|
return (
|
|
<div className="embed-responsive embed-responsive-16by9">
|
|
<video className="embed-responsive-item" controls>
|
|
<source src={url} type="video/mp4" />
|
|
{subs.map((sub, index) => (
|
|
<track
|
|
key={index}
|
|
kind="subtitles"
|
|
label={sub.language}
|
|
src={sub.vvt_file}
|
|
srcLang={sub.language}
|
|
/>
|
|
))}
|
|
</video>
|
|
</div>
|
|
);
|
|
};
|
|
Player.propTypes = {
|
|
subtitles: PropTypes.array,
|
|
url: PropTypes.string.isRequired,
|
|
};
|