Archived
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18n-lite";
|
|
|
|
const DISMISS_KEY = "cloud-reader.pdf-limitations-dismissed";
|
|
|
|
interface PdfLimitationsNoticeProps {
|
|
bookId: number;
|
|
}
|
|
|
|
export function PdfLimitationsNotice({ bookId }: PdfLimitationsNoticeProps) {
|
|
const { t } = useTranslation();
|
|
const storageKey = `${DISMISS_KEY}:${bookId}`;
|
|
const [visible, setVisible] = useState(() => {
|
|
try {
|
|
return localStorage.getItem(storageKey) !== "1";
|
|
} catch {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
if (!visible) return null;
|
|
|
|
const dismiss = () => {
|
|
setVisible(false);
|
|
try {
|
|
localStorage.setItem(storageKey, "1");
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="reader-pdf-notice" role="status">
|
|
<div className="reader-pdf-notice-text">
|
|
<strong className="reader-pdf-notice-title">{t("reader.pdfLimitationsTitle")}</strong>
|
|
<p className="reader-pdf-notice-body">{t("reader.pdfLimitationsBody")}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="reader-pdf-notice-dismiss"
|
|
onClick={dismiss}
|
|
aria-label={t("reader.pdfLimitationsDismissAria")}
|
|
>
|
|
{t("common.dismiss")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|