Add better scrape error dialog

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>",
+        "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.",
-        "text2": "We can not find the media you are looking for or no one provides it...",
         "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": {

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}>
+        <IconPill icon={icon}>{t("player.scraping.notFound.badge")}</IconPill>
-          {t("player.scraping.notFound.badge")}
+        <Title>{title}</Title>
-        </IconPill>
-        <Title>{t("player.scraping.notFound.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