72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
import React, { useState } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { List } from "immutable"
|
|
|
|
import Modal from "react-bootstrap/Modal"
|
|
import Dropdown from "react-bootstrap/Dropdown"
|
|
import SplitButton from "react-bootstrap/SplitButton"
|
|
|
|
const DownloadButton = (props) => {
|
|
if (props.url === "") { return null; }
|
|
const size = props.xs ? "sm" : "";
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<SplitButton
|
|
drop="up"
|
|
variant="danger"
|
|
href={props.url}
|
|
title="Download"
|
|
size={size}
|
|
id="download-button-id">
|
|
<Dropdown.Item eventKey="1" onClick={() => setShowModal(true)}>
|
|
<span>
|
|
<i className="fa fa-globe"></i> Stream in browser
|
|
</span>
|
|
</Dropdown.Item>
|
|
</SplitButton>
|
|
|
|
<Modal show={showModal} onHide={() => setShowModal(false)} size="lg" centered>
|
|
<Modal.Header closeButton>{props.name}</Modal.Header>
|
|
<Modal.Body>
|
|
<Player url={props.url} subtitles={props.subtitles} />
|
|
</Modal.Body>
|
|
</Modal>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
DownloadButton.propTypes = {
|
|
name: PropTypes.string,
|
|
xs: PropTypes.bool,
|
|
url: PropTypes.string.isRequired,
|
|
subtitles: PropTypes.instanceOf(List),
|
|
};
|
|
export default DownloadButton;
|
|
|
|
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 className="embed-responsive-item" 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,
|
|
};
|