1
0
Fork 0
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:
Cooper Ransom 2024-03-26 19:43:53 -04:00
parent 1ba72fe768
commit b7be016377
2 changed files with 39 additions and 28 deletions

View file

@ -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": {

View file

@ -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