From 44740aed6a2d17f0e1178c2d5b6351bcc63f5928 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 4 Jan 2024 00:55:24 +0100
Subject: [PATCH] Create WarningPart for in-player use

---
 src/pages/parts/player/ScrapingPart.tsx | 14 +++-----------
 src/pages/parts/util/WarningPart.tsx    | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/parts/util/WarningPart.tsx

diff --git a/src/pages/parts/player/ScrapingPart.tsx b/src/pages/parts/player/ScrapingPart.tsx
index eb0e5bfc..70a7b826 100644
--- a/src/pages/parts/player/ScrapingPart.tsx
+++ b/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 (
-      <LargeTextPart
-        iconSlot={
-          <Icon className="text-type-danger text-2xl" icon={Icons.WARNING} />
-        }
-      >
-        {t("player.turnstile.error")}
-      </LargeTextPart>
-    );
+    return <WarningPart>{t("player.turnstile.error")}</WarningPart>;
 
   return (
     <div
diff --git a/src/pages/parts/util/WarningPart.tsx b/src/pages/parts/util/WarningPart.tsx
new file mode 100644
index 00000000..384e1c0f
--- /dev/null
+++ b/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>
+  );
+}