mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Add better scrape error dialog
This commit is contained in:
parent
1ba72fe768
commit
b7be016377
2 changed files with 39 additions and 28 deletions
|
@ -423,11 +423,17 @@
|
|||
"notFound": {
|
||||
"badge": "Not found",
|
||||
"detailsButton": "Show details",
|
||||
"reloadButton": "Try again",
|
||||
"homeButton": "Go home",
|
||||
"text": "We can not find the media you are looking for or no one provides it... <bold>Did you enable the extension for this site?</bold>",
|
||||
"text2": "We can not find the media you are looking for or no one provides it...",
|
||||
"text": "We have searched through our providers and cannot find the media you are looking for! We do not host the media and have no control over what is available. Please click 'Show details' below for more details.",
|
||||
"title": "We couldn't find that"
|
||||
},
|
||||
"extensionFailure": {
|
||||
"badge": "Not found",
|
||||
"homeButton": "Go home",
|
||||
"enableExtension": "Enable extension",
|
||||
"disabledTitle": "Extension disabled",
|
||||
"text": "You've installed the movie-web extension. To start using it, complete a few preliminary steps. Have you enabled the extension for this site?",
|
||||
"title": "Extension Disabled"
|
||||
}
|
||||
},
|
||||
"time": {
|
||||
|
|
|
@ -3,7 +3,7 @@ import { Trans, useTranslation } from "react-i18next";
|
|||
import { useLocation } from "react-router-dom";
|
||||
|
||||
import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
|
||||
import { extensionInfo } from "@/backend/extension/messaging";
|
||||
import { extensionInfo, sendPage } from "@/backend/extension/messaging";
|
||||
import { Button } from "@/components/buttons/Button";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { IconPill } from "@/components/layout/IconPill";
|
||||
|
@ -47,6 +47,8 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
|
|||
const location = useLocation();
|
||||
const [extensionState, setExtensionState] =
|
||||
useState<ExtensionStatus>("unknown");
|
||||
const [title, setTitle] = useState(t("player.scraping.notFound.title"));
|
||||
const [icon, setIcon] = useState(Icons.WAND);
|
||||
|
||||
const error = useMemo(() => {
|
||||
const data = props.data;
|
||||
|
@ -65,20 +67,24 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
|
|||
}, [props, location]);
|
||||
|
||||
useEffect(() => {
|
||||
getExtensionState().then(setExtensionState);
|
||||
}, []);
|
||||
getExtensionState().then((state) => {
|
||||
setExtensionState(state);
|
||||
if (state === "disallowed") {
|
||||
setTitle(t("player.scraping.extensionFailure.disabledTitle"));
|
||||
setIcon(Icons.LOCK);
|
||||
}
|
||||
});
|
||||
}, [t]);
|
||||
|
||||
return (
|
||||
<ErrorLayout>
|
||||
<ErrorContainer>
|
||||
<IconPill icon={Icons.WAND}>
|
||||
{t("player.scraping.notFound.badge")}
|
||||
</IconPill>
|
||||
<Title>{t("player.scraping.notFound.title")}</Title>
|
||||
<IconPill icon={icon}>{t("player.scraping.notFound.badge")}</IconPill>
|
||||
<Title>{title}</Title>
|
||||
<Paragraph>
|
||||
{extensionState === "disallowed" ? (
|
||||
<Trans
|
||||
i18nKey="player.scraping.notFound.text"
|
||||
i18nKey="player.scraping.extensionFailure.text"
|
||||
components={{
|
||||
bold: (
|
||||
<span className="font-bold" style={{ color: "#cfcfcf" }} />
|
||||
|
@ -87,7 +93,7 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
|
|||
/>
|
||||
) : (
|
||||
<Trans
|
||||
i18nKey="player.scraping.notFound.text2"
|
||||
i18nKey="player.scraping.notFound.text"
|
||||
components={{
|
||||
bold: (
|
||||
<span className="font-bold" style={{ color: "#cfcfcf" }} />
|
||||
|
@ -97,14 +103,6 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
|
|||
)}
|
||||
</Paragraph>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
onClick={() => window.location.reload()}
|
||||
theme="secondary"
|
||||
padding="md:px-12 p-2.5"
|
||||
className="mt-6"
|
||||
>
|
||||
{t("player.scraping.notFound.reloadButton")}
|
||||
</Button>
|
||||
<Button
|
||||
href="/"
|
||||
theme="secondary"
|
||||
|
@ -113,15 +111,22 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
|
|||
>
|
||||
{t("player.scraping.notFound.homeButton")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
sendPage({
|
||||
page: "PermissionGrant",
|
||||
redirectUrl: window.location.href,
|
||||
});
|
||||
}}
|
||||
theme="purple"
|
||||
padding="md:px-12 p-2.5"
|
||||
className="mt-6"
|
||||
>
|
||||
{extensionState === "unknown"
|
||||
? t("player.scraping.notFound.detailsButton")
|
||||
: t("player.scraping.extensionFailure.enableExtension")}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => modal.show()}
|
||||
theme="purple"
|
||||
padding="md:px-12 p-2.5"
|
||||
className="mt-6"
|
||||
>
|
||||
{t("player.scraping.notFound.detailsButton")}
|
||||
</Button>
|
||||
</ErrorContainer>
|
||||
{error ? (
|
||||
<ErrorCardInModal
|
||||
|
|
Loading…
Reference in a new issue