Polish last commit

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 { sendPage } from "@/backend/extension/messaging";
-import { extensionInfo, 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";
-
+import { getExtensionState } from "@/utils/onboarding";
-type ExtensionStatus =
+import type { ExtensionStatus } from "@/utils/onboarding";
-  | "unknown"
-  | "failed"
-  | "disallowed"
-  | "noperms"
-  | "outdated"
-  | "success";
-
-async function getExtensionState(): Promise<ExtensionStatus> {
-  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
-}
 
 function RefreshBar() {
   const { t } = useTranslation();

src/pages/parts/player/ScrapeErrorPart.tsx

@@ -2,8 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 
-import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
+import { sendPage } 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";
@@ -12,18 +11,11 @@ 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 { ExtensionStatus, getExtensionState } from "@/utils/onboarding";
 import { getProviderApiUrls } from "@/utils/proxyUrls";
 
 import { ErrorCardInModal } from "../errors/ErrorCard";
 
-type ExtensionStatus =
-  | "unknown"
-  | "failed"
-  | "disallowed"
-  | "noperms"
-  | "outdated"
-  | "success";
-
 export interface ScrapeErrorPartProps {
   data: {
     sources: Record<string, ScrapingSegment>;
@@ -31,16 +23,6 @@ export interface ScrapeErrorPartProps {
   };
 }
 
-async function getExtensionState(): Promise<ExtensionStatus> {
-  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
-}
-
 export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
   const { t } = useTranslation();
   const modal = useModal("error");
@@ -67,7 +49,7 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
   }, [props, location]);
 
   useEffect(() => {
-    getExtensionState().then((state) => {
+    getExtensionState().then((state: ExtensionStatus) => {
       setExtensionState(state);
       if (state === "disallowed") {
         setTitle(t("player.scraping.extensionFailure.disabledTitle"));
@@ -76,13 +58,13 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
     });
   }, [t]);
 
+  if (extensionState === "disallowed") {
     return (
       <ErrorLayout>
         <ErrorContainer>
           <IconPill icon={icon}>{t("player.scraping.notFound.badge")}</IconPill>
           <Title>{title}</Title>
           <Paragraph>
-          {extensionState === "disallowed" ? (
             <Trans
               i18nKey="player.scraping.extensionFailure.text"
               components={{
@@ -91,16 +73,6 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
                 ),
               }}
             />
-          ) : (
-            <Trans
-              i18nKey="player.scraping.notFound.text"
-              components={{
-                bold: (
-                  <span className="font-bold" style={{ color: "#cfcfcf" }} />
-                ),
-              }}
-            />
-          )}
           </Paragraph>
           <div className="flex gap-3">
             <Button
@@ -122,9 +94,55 @@ export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
               padding="md:px-12 p-2.5"
               className="mt-6"
             >
-            {extensionState === "unknown"
+              {t("player.scraping.extensionFailure.enableExtension")}
-              ? t("player.scraping.notFound.detailsButton")
+            </Button>
-              : t("player.scraping.extensionFailure.enableExtension")}
+          </div>
+        </ErrorContainer>
+        {error ? (
+          <ErrorCardInModal
+            id={modal.id}
+            onClose={() => modal.hide()}
+            error={error}
+          />
+        ) : null}
+      </ErrorLayout>
+    );
+  }
+
+  return (
+    <ErrorLayout>
+      <ErrorContainer>
+        <IconPill icon={icon}>{t("player.scraping.notFound.badge")}</IconPill>
+        <Title>{title}</Title>
+        <Paragraph>
+          <Trans
+            i18nKey="player.scraping.notFound.text"
+            components={{
+              bold: <span className="font-bold" style={{ color: "#cfcfcf" }} />,
+            }}
+          />
+        </Paragraph>
+        <div className="flex gap-3">
+          <Button
+            href="/"
+            theme="secondary"
+            padding="md:px-12 p-2.5"
+            className="mt-6"
+          >
+            {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"
+          >
+            {t("player.scraping.notFound.detailsButton")}
           </Button>
         </div>
       </ErrorContainer>

src/utils/onboarding.ts

@@ -1,8 +1,30 @@
-import { isExtensionActive } from "@/backend/extension/messaging";
+import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
+import {
+  extensionInfo,
+  isExtensionActive,
+} from "@/backend/extension/messaging";
 import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 import { useOnboardingStore } from "@/stores/onboarding";
 
+export type ExtensionStatus =
+  | "unknown"
+  | "failed"
+  | "disallowed"
+  | "noperms"
+  | "outdated"
+  | "success";
+
+export async function getExtensionState(): Promise<ExtensionStatus> {
+  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
+}
+
 export async function needsOnboarding(): Promise<boolean> {
   // if onboarding is dislabed, no onboarding needed
   if (!conf().HAS_ONBOARDING) return false;