74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import React, { useState } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { List } from "immutable"
|
|
|
|
import Dropdown from "react-bootstrap/Dropdown"
|
|
|
|
export const SubtitlesButton = ({
|
|
subtitles,
|
|
inLibrary,
|
|
searching,
|
|
search,
|
|
}) => {
|
|
if (inLibrary === false) { return null }
|
|
/* eslint-disable */
|
|
const [show, setShow] = useState(false);
|
|
/* eslint-enable */
|
|
|
|
const onSelect = (eventKey) => {
|
|
if (eventKey === null || eventKey != 1) {
|
|
setShow(false);
|
|
}
|
|
}
|
|
|
|
const onToggle = (isOpen, event, metadata) => {
|
|
// Don't close on select
|
|
if (metadata && metadata.source !== "select") {
|
|
setShow(isOpen);
|
|
}
|
|
}
|
|
|
|
const count = (subtitles && subtitles.size !== 0) ? subtitles.size : 0;
|
|
return (
|
|
<span className="mr-1 mb-1">
|
|
<Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
|
|
<Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
|
|
<i className="fa fa-commenting mr-1" />
|
|
Subtitles
|
|
<span className="ml-1 badge badge-pill badge-info">
|
|
{count}
|
|
</span>
|
|
</Dropdown.Toggle>
|
|
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item eventKey={1} onClick={search} >
|
|
<i className={`fa ${ searching ? "fa-spin" : "" } fa-refresh mr-1`} />
|
|
Automatic search
|
|
</Dropdown.Item>
|
|
{count > 0 &&
|
|
<React.Fragment>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Header>
|
|
<span className="text-warning">
|
|
Available subtitles
|
|
</span>
|
|
</Dropdown.Header>
|
|
</React.Fragment>
|
|
}
|
|
{count > 0 && subtitles.toIndexedSeq().map((subtitle, index) => (
|
|
<Dropdown.Item href={subtitle.get("url")} key={index}>
|
|
{subtitle.get("language").split("_")[1]}
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</span>
|
|
);
|
|
}
|
|
SubtitlesButton.propTypes = {
|
|
subtitles: PropTypes.instanceOf(List),
|
|
inLibrary: PropTypes.bool.isRequired,
|
|
searching: PropTypes.bool.isRequired,
|
|
search: PropTypes.func.isRequired,
|
|
}
|