From 808fe1570920d03bee2bf7e8b89724afa6ea9979 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Wed, 11 Sep 2024 23:49:28 -0600
Subject: [PATCH] Make scraping buttons stay on top

---
 src/pages/parts/player/PlayerPart.tsx   |  7 +++-
 src/pages/parts/player/ScrapingPart.tsx | 43 ++++++++++++++-----------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/pages/parts/player/PlayerPart.tsx b/src/pages/parts/player/PlayerPart.tsx
index 2d73286b..dc783c91 100644
--- a/src/pages/parts/player/PlayerPart.tsx
+++ b/src/pages/parts/player/PlayerPart.tsx
@@ -7,6 +7,8 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 
+import { ScrapingPartInterruptButton } from "./ScrapingPart";
+
 export interface PlayerPartProps {
   children?: ReactNode;
   backUrl: string;
@@ -80,7 +82,10 @@ export function PlayerPart(props: PlayerPartProps) {
       </Player.TopControls>
 
       <Player.BottomControls show={showTargets}>
-        <div className="flex items-center space-x-3">
+        <div className="flex items-center justify-center space-x-3 h-full">
+          {status === playerStatus.SCRAPING ? (
+            <ScrapingPartInterruptButton />
+          ) : null}
           {status === playerStatus.PLAYING ? (
             <>
               {isMobile ? <Player.Time short /> : null}
diff --git a/src/pages/parts/player/ScrapingPart.tsx b/src/pages/parts/player/ScrapingPart.tsx
index af3ee25a..d63d39df 100644
--- a/src/pages/parts/player/ScrapingPart.tsx
+++ b/src/pages/parts/player/ScrapingPart.tsx
@@ -151,25 +151,32 @@ export function ScrapingPart(props: ScrapingProps) {
             </div>
           );
         })}
-        <div className="flex gap-3 pb-3">
-          <Button
-            href="/"
-            theme="secondary"
-            padding="md:px-17 p-3"
-            className="mt-6"
-          >
-            {t("notFound.goHome")}
-          </Button>
-          <Button
-            onClick={() => window.location.reload()}
-            theme="purple"
-            padding="md:px-17 p-3"
-            className="mt-6"
-          >
-            {t("notFound.reloadButton")}
-          </Button>
-        </div>
       </div>
     </div>
   );
 }
+
+export function ScrapingPartInterruptButton() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex gap-3 pb-3">
+      <Button
+        href="/"
+        theme="secondary"
+        padding="md:px-17 p-3"
+        className="mt-6"
+      >
+        {t("notFound.goHome")}
+      </Button>
+      <Button
+        onClick={() => window.location.reload()}
+        theme="purple"
+        padding="md:px-17 p-3"
+        className="mt-6"
+      >
+        {t("notFound.reloadButton")}
+      </Button>
+    </div>
+  );
+}