From b7be0163773968bce546a1bd20fcc9dfe15cbf01 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Tue, 26 Mar 2024 19:43:53 -0400
Subject: [PATCH] Add better scrape error dialog

---
 src/assets/locales/en.json                 | 12 +++--
 src/pages/parts/player/ScrapeErrorPart.tsx | 55 ++++++++++++----------
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 5786e446..849a5993 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -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": {
diff --git a/src/pages/parts/player/ScrapeErrorPart.tsx b/src/pages/parts/player/ScrapeErrorPart.tsx
index 532dc630..a6a89fd9 100644
--- a/src/pages/parts/player/ScrapeErrorPart.tsx
+++ b/src/pages/parts/player/ScrapeErrorPart.tsx
@@ -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