From d82de1f7c89c214ec983bc244f4f1d3381410342 Mon Sep 17 00:00:00 2001 From: Captain Jack Sparrow <163903675+sussy-code@users.noreply.github.com> Date: Thu, 28 Mar 2024 05:17:17 -0400 Subject: [PATCH] Better scrape error text for extension (#1042) * Add better scrape error messages for the extension * Remove config.js silly me * Polish and resolve issues * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Update src/pages/parts/player/ScrapeErrorPart.tsx Co-authored-by: William Oldham * Fix duplicate button value * Resolve issues * Ok now i fixed it all * Apply suggestions from code review * I am dum --------- Co-authored-by: Cooper Ransom Co-authored-by: William Oldham --- index.html | 2 +- src/assets/locales/en.json | 7 +++ src/pages/onboarding/OnboardingExtension.tsx | 23 +------- src/pages/parts/player/ScrapeErrorPart.tsx | 61 +++++++++++++++++++- src/utils/extension.ts | 20 +++++++ 5 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 src/utils/extension.ts diff --git a/index.html b/index.html index 1d1c3577..4555b17a 100644 --- a/index.html +++ b/index.html @@ -162,4 +162,4 @@ - \ No newline at end of file + diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index eeda3629..ab128219 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -388,6 +388,13 @@ "homeButton": "Go home", "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": "Extension disabled", + "homeButton": "Go home", + "enableExtension": "Enable extension", + "title": "Please enable the extension", + "text": "You've installed the movie-web extension. To start using it, you need to enable the extension for this site." } }, "time": { diff --git a/src/pages/onboarding/OnboardingExtension.tsx b/src/pages/onboarding/OnboardingExtension.tsx index db351dda..66e662e2 100644 --- a/src/pages/onboarding/OnboardingExtension.tsx +++ b/src/pages/onboarding/OnboardingExtension.tsx @@ -2,8 +2,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { useAsyncFn, useInterval } from "react-use"; -import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; -import { extensionInfo, sendPage } from "@/backend/extension/messaging"; +import { sendPage } from "@/backend/extension/messaging"; import { Button } from "@/components/buttons/Button"; import { Icon, Icons } from "@/components/Icon"; import { Loading } from "@/components/layout/Loading"; @@ -22,24 +21,8 @@ import { ExtensionDetectionResult, detectExtensionInstall, } from "@/utils/detectFeatures"; - -type ExtensionStatus = - | "unknown" - | "failed" - | "disallowed" - | "noperms" - | "outdated" - | "success"; - -async function getExtensionState(): Promise { - const info = await extensionInfo(); - if (!info) return "unknown"; // cant talk to extension - if (!info.success) return "failed"; // extension failed to respond - if (!info.allowed) return "disallowed"; // extension is not enabled on this page - if (!info.hasPermission) return "noperms"; // extension has no perms to do it's tasks - if (!isAllowedExtensionVersion(info.version)) return "outdated"; // extension is too old - return "success"; // no problems -} +import { getExtensionState } from "@/utils/extension"; +import type { ExtensionStatus } from "@/utils/extension"; function RefreshBar() { const { t } = useTranslation(); diff --git a/src/pages/parts/player/ScrapeErrorPart.tsx b/src/pages/parts/player/ScrapeErrorPart.tsx index 127a69a6..bc1f78e6 100644 --- a/src/pages/parts/player/ScrapeErrorPart.tsx +++ b/src/pages/parts/player/ScrapeErrorPart.tsx @@ -1,7 +1,8 @@ -import { useMemo } from "react"; -import { useTranslation } from "react-i18next"; +import { useEffect, useMemo, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; import { useLocation } from "react-router-dom"; +import { sendPage } from "@/backend/extension/messaging"; import { Button } from "@/components/buttons/Button"; import { Icons } from "@/components/Icon"; import { IconPill } from "@/components/layout/IconPill"; @@ -10,6 +11,8 @@ import { Paragraph } from "@/components/text/Paragraph"; import { Title } from "@/components/text/Title"; import { ScrapingItems, ScrapingSegment } from "@/hooks/useProviderScrape"; import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout"; +import { getExtensionState } from "@/utils/extension"; +import type { ExtensionStatus } from "@/utils/extension"; import { getProviderApiUrls } from "@/utils/proxyUrls"; import { ErrorCardInModal } from "../errors/ErrorCard"; @@ -25,6 +28,8 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) { const { t } = useTranslation(); const modal = useModal("error"); const location = useLocation(); + const [extensionState, setExtensionState] = + useState("unknown"); const error = useMemo(() => { const data = props.data; @@ -42,6 +47,58 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) { return str; }, [props, location]); + useEffect(() => { + getExtensionState().then((state: ExtensionStatus) => { + setExtensionState(state); + }); + }, [t]); + + if (extensionState === "disallowed") { + return ( + + + + {t("player.scraping.extensionFailure.badge")} + + {t("player.scraping.extensionFailure.title")} + + + ), + }} + /> + +
+ + +
+ + + ); + } + return ( diff --git a/src/utils/extension.ts b/src/utils/extension.ts new file mode 100644 index 00000000..8874146b --- /dev/null +++ b/src/utils/extension.ts @@ -0,0 +1,20 @@ +import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; +import { extensionInfo } from "@/backend/extension/messaging"; + +export type ExtensionStatus = + | "unknown" + | "failed" + | "disallowed" + | "noperms" + | "outdated" + | "success"; + +export async function getExtensionState(): Promise { + const info = await extensionInfo(); + if (!info) return "unknown"; // cant talk to extension + if (!info.success) return "failed"; // extension failed to respond + if (!info.allowed) return "disallowed"; // extension is not enabled on this page + if (!info.hasPermission) return "noperms"; // extension has no perms to do it's tasks + if (!isAllowedExtensionVersion(info.version)) return "outdated"; // extension is too old + return "success"; // no problems +}