Merge 01ef6dd473 into 7495d51408

src/backend/helpers/fetch.ts

@@ -69,7 +69,12 @@ export async function singularProxiedFetch<T>(
     onResponse(context) {
       const tokenHeader = context.response.headers.get("X-Token");
       if (tokenHeader) setApiToken(tokenHeader);
+
+      if (Array.isArray(ops.onResponse)) {
+        ops.onResponse.forEach((hook) => hook(context));
+      } else {
         ops.onResponse?.(context);
+      }
     },
   });
 }

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}

src/pages/parts/player/ScrapingPart.tsx

@@ -151,6 +151,15 @@ export function ScrapingPart(props: ScrapingProps) {
             </div>
           );
         })}
+      </div>
+    </div>
+  );
+}
+
+export function ScrapingPartInterruptButton() {
+  const { t } = useTranslation();
+
+  return (
     <div className="flex gap-3 pb-3">
       <Button
         href="/"
@@ -169,7 +178,5 @@ export function ScrapingPart(props: ScrapingProps) {
         {t("notFound.reloadButton")}
       </Button>
     </div>
-      </div>
-    </div>
   );
 }