Merge pull request #710 from movie-web/warningpart

Create WarningPart for in-player use

src/pages/parts/player/ScrapingPart.tsx

@@ -9,7 +9,6 @@ import {
   scrapePartsToProviderMetric,
   useReportProviders,
 } from "@/backend/helpers/report";
-import { Icon, Icons } from "@/components/Icon";
 import { Loading } from "@/components/layout/Loading";
 import {
   ScrapeCard,
@@ -21,7 +20,8 @@ import {
   useListCenter,
   useScrape,
 } from "@/hooks/useProviderScrape";
-import { LargeTextPart } from "@/pages/parts/util/LargeTextPart";
+
+import { WarningPart } from "../util/WarningPart";
 
 export interface ScrapingProps {
   media: ScrapeMedia;
@@ -88,15 +88,7 @@ export function ScrapingPart(props: ScrapingProps) {
     currentProviderIndex = sourceOrder.length - 1;
 
   if (failedStartScrape)
-    return (
+    return <WarningPart>{t("player.turnstile.error")}</WarningPart>;
-      <LargeTextPart
-        iconSlot={
-          <Icon className="text-type-danger text-2xl" icon={Icons.WARNING} />
-        }
-      >
-        {t("player.turnstile.error")}
-      </LargeTextPart>
-    );
 
   return (
     <div

src/pages/parts/util/WarningPart.tsx

@@ -0,0 +1,14 @@
+import { Icon, Icons } from "@/components/Icon";
+import { BlurEllipsis } from "@/pages/layouts/SubPageLayout";
+
+export function WarningPart(props: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col justify-center items-center h-screen text-center font-medium">
+      <BlurEllipsis />
+      <Icon className="text-type-danger text-2xl" icon={Icons.WARNING} />
+      <div className="max-w-[19rem] mt-3 mb-12 text-type-secondary">
+        {props.children}
+      </div>
+    </div>
+  );
+}