Merge 01ef6dd473 into fad6316020

package.json

@@ -46,7 +46,7 @@
     "detect-browser": "^5.3.0",
     "dompurify": "^3.1.6",
     "flag-icons": "^7.2.3",
-    "focus-trap-react": "^10.2.3",
+    "focus-trap-react": "^10.3.0",
     "fscreen": "^1.2.0",
     "fuse.js": "^7.0.0",
     "hls.js": "^1.5.15",
@@ -58,7 +58,7 @@
     "million": "^2.6.4",
     "nanoid": "^5.0.7",
     "node-forge": "^1.3.1",
-    "ofetch": "^1.3.4",
+    "ofetch": "^1.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
@@ -78,7 +78,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-typescript": "^7.24.7",
-    "@rollup/wasm-node": "^4.21.2",
+    "@rollup/wasm-node": "^4.22.4",
     "@types/chromecast-caf-sender": "^1.0.10",
     "@types/crypto-js": "^4.2.2",
     "@types/dompurify": "^3.0.5",
@@ -88,7 +88,7 @@
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^20.16.5",
     "@types/pako": "^2.0.3",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-lazy-load-image-component": "^1.6.4",
@@ -102,7 +102,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
@@ -114,18 +114,18 @@
     "glob": "^10.4.5",
     "handlebars": "^4.7.8",
     "jsdom": "^23.2.0",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "postcss-rtl": "^2.0.0",
     "postcss-rtlcss": "^4.0.9",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "rollup-plugin-visualizer": "^5.12.0",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.12",
     "tailwindcss-themer": "^4.0.0",
     "type-fest": "^4.26.1",
     "typescript": "^5.6.2",
-    "vite": "^5.4.3",
+    "vite": "^5.4.7",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-package-version": "^1.1.0",
     "vite-plugin-pwa": "^0.17.5",

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,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>
+  );
+}

vite.config.mts

@@ -122,32 +122,30 @@ export default defineConfig(({ mode }) => {
 
     build: {
       sourcemap: true,
-      chunkSizeWarningLimit: 1600,
       rollupOptions: {
-        output: {
-          manualChunks(id: string) {
-            if (id.includes("@sozialhelden+ietf-language-tags") || id.includes("country-language")) {
-              return "language-db";
-            }
-            if (id.includes("hls.js")) {
-              return "hls";
-            }
-            if (id.includes("node-forge") || id.includes("crypto-js")) {
-              return "auth";
-            }
-            if (id.includes("locales") && !id.includes("en.json")) {
-              return "locales";
-            }
-            if (id.includes("react-dom")) {
-              return "react-dom";
-            }
-            if (id.includes("Icon.tsx")) {
-              return "Icons";
-            }
-            const isCaptioningPackage = captioningPackages.some(packageName => id.includes(packageName));
-            if (isCaptioningPackage) {
-              return "caption-parsing";
-            }
+        output: {},
+        manualChunks(id: string) {
+          if (id.includes("@sozialhelden+ietf-language-tags") || id.includes("country-language")) {
+            return "language-db";
+          }
+          if (id.includes("hls.js")) {
+            return "hls";
+          }
+          if (id.includes("node-forge") || id.includes("crypto-js")) {
+            return "auth";
+          }
+          if (id.includes("locales") && !id.includes("en.json")) {
+            return "locales";
+          }
+          if (id.includes("react-dom")) {
+            return "react-dom";
+          }
+          if (id.includes("Icon.tsx")) {
+            return "Icons";
+          }
+          const isCaptioningPackage = captioningPackages.some(packageName => id.includes(packageName));
+          if (isCaptioningPackage) {
+            return "caption-parsing";
           }
         }
       }