120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import Dropdown from "react-bootstrap/Dropdown";
|
|
|
|
import { prettySize, upperCaseFirst } from "../../utils";
|
|
|
|
export const SubtitlesButton = ({
|
|
subtitles,
|
|
inLibrary,
|
|
search,
|
|
fetchingSubtitles,
|
|
}) => {
|
|
if (inLibrary === false) {
|
|
return null;
|
|
}
|
|
|
|
/* eslint-disable */
|
|
const [show, setShow] = useState(false);
|
|
/* eslint-enable */
|
|
|
|
const onToggle = (isOpen, event, metadata) => {
|
|
// Don't close on select
|
|
if (metadata && metadata.source !== "select") {
|
|
setShow(isOpen);
|
|
}
|
|
};
|
|
|
|
const searchAll = () => {
|
|
const langs = ["fr_FR", "en_US"];
|
|
for (const lang of langs) {
|
|
search(lang);
|
|
}
|
|
};
|
|
|
|
const count = subtitles && subtitles.size !== 0 ? subtitles.size : 0;
|
|
|
|
const searching = fetchingSubtitles.length > 0;
|
|
|
|
return (
|
|
<span className="mr-1 mb-1">
|
|
<Dropdown drop="up" show={show} onToggle={onToggle}>
|
|
<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={searchAll}>
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<span>Automatic search</span>
|
|
<div
|
|
className={`fa ${searching ? "fa-spin" : ""} fa-refresh ml-1`}
|
|
/>
|
|
</div>
|
|
</Dropdown.Item>
|
|
{count > 0 && (
|
|
<React.Fragment>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Header>
|
|
<span className="text-warning">Available subtitles</span>
|
|
</Dropdown.Header>
|
|
</React.Fragment>
|
|
)}
|
|
{count > 0 &&
|
|
[...subtitles.entries()].map(([lang, subtitle]) => (
|
|
<SubtitleEntry
|
|
key={lang}
|
|
subtitle={subtitle}
|
|
searching={searching}
|
|
search={search}
|
|
/>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</span>
|
|
);
|
|
};
|
|
SubtitlesButton.propTypes = {
|
|
subtitles: PropTypes.object,
|
|
inLibrary: PropTypes.bool.isRequired,
|
|
fetchingSubtitles: PropTypes.array.isRequired,
|
|
search: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export const SubtitleEntry = ({ subtitle, search }) => {
|
|
const lang = upperCaseFirst(subtitle.lang.split("_")[0]);
|
|
const size = subtitle.size ? subtitle.size : 0;
|
|
const embedded = subtitle.embedded ? subtitle.embedded : false;
|
|
|
|
const handleRefresh = () => {
|
|
search(subtitle.lang);
|
|
};
|
|
|
|
return (
|
|
<Dropdown.Item as="span" disabled={embedded}>
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<a href={subtitle.url ? subtitle.url : ""} className="link-unstyled">
|
|
{lang}
|
|
{embedded && <small className="ml-2">(Inside the video)</small>}
|
|
{size !== 0 && <span> ({prettySize(size)})</span>}
|
|
</a>
|
|
{!embedded && (
|
|
<div
|
|
onClick={handleRefresh}
|
|
className={`clickable fa ${
|
|
subtitle.searching ? "fa-spin" : ""
|
|
} fa-refresh`}
|
|
/>
|
|
)}
|
|
</div>
|
|
</Dropdown.Item>
|
|
);
|
|
};
|
|
SubtitleEntry.propTypes = {
|
|
search: PropTypes.func.isRequired,
|
|
subtitle: PropTypes.object,
|
|
};
|