Merge pull request #583 from movie-web/fix-touch-pause

More bugfixes

.eslintrc.js

@@ -62,7 +62,7 @@ module.exports = {
     "no-nested-ternary": "off",
     "prefer-destructuring": "off",
     "no-param-reassign": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern:  "^_" }],
     "react/jsx-filename-extension": [
       "error",
       { extensions: [".js", ".tsx", ".jsx"] }

src/backend/helpers/providerApi.ts

@@ -94,6 +94,11 @@ export async function getApiToken(): Promise<string | null> {
   return apiToken;
 }
 
+function parseEventInput(inp: string): any {
+  if (inp.length === 0) return {};
+  return JSON.parse(inp);
+}
+
 export async function connectServerSideEvents<T>(
   url: string,
   endEvents: string[],
@@ -115,12 +120,12 @@ export async function connectServerSideEvents<T>(
   endEvents.forEach((evt) => {
     eventSource.addEventListener(evt, (e) => {
       eventSource.close();
-      promResolve(JSON.parse(e.data));
+      promResolve(parseEventInput(e.data));
     });
   });
 
   eventSource.addEventListener("token", (e) => {
-    setApiToken(JSON.parse(e.data));
+    setApiToken(parseEventInput(e.data));
   });
 
   eventSource.addEventListener("error", (err: MessageEvent<any>) => {

src/backend/metadata/tmdb.ts

@@ -215,7 +215,7 @@ export function getMediaDetails<
 }
 
 export function getMediaPoster(posterPath: string | null): string | undefined {
-  if (posterPath) return `https://image.tmdb.org/t/p/w185/${posterPath}`;
+  if (posterPath) return `https://image.tmdb.org/t/p/w342/${posterPath}`;
 }
 
 export async function getEpisodes(

src/components/overlays/OverlayDisplay.tsx

@@ -50,11 +50,7 @@ export function OverlayPortal(props: {
       {portalElement
         ? createPortal(
             <Transition show={props.show} animation="none">
-              <FocusTrap
+              <FocusTrap>
-                focusTrapOptions={{
-                  onDeactivate: close,
-                }}
-              >
                 <div className="popout-wrapper fixed overflow-hidden pointer-events-auto inset-0 z-[999] select-none">
                   <Transition animation="fade" isChild>
                     <div

src/components/player/internals/VideoClickTarget.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import { PointerEvent, useCallback } from "react";
+import { useEffectOnce, useTimeoutFn } from "react-use";
 
 import { useShouldShowVideoElement } from "@/components/player/internals/VideoContainer";
 import { PlayerHoverState } from "@/stores/player/slices/interface";
@@ -13,6 +14,12 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
     (s) => s.updateInterfaceHovering,
   );
   const hovering = usePlayerStore((s) => s.interface.hovering);
+  const [_, cancel, reset] = useTimeoutFn(() => {
+    updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
+  }, 3000);
+  useEffectOnce(() => {
+    cancel();
+  });
 
   const toggleFullscreen = useCallback(() => {
     display?.toggleFullscreen();
@@ -29,11 +36,15 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
       }
 
       // toggle on other types of clicks
-      if (hovering !== PlayerHoverState.MOBILE_TAPPED)
+      if (hovering !== PlayerHoverState.MOBILE_TAPPED) {
         updateInterfaceHovering(PlayerHoverState.MOBILE_TAPPED);
-      else updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
+        reset();
+      } else {
+        updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
+        cancel();
+      }
     },
-    [display, isPaused, hovering, updateInterfaceHovering],
+    [display, isPaused, hovering, updateInterfaceHovering, reset, cancel],
   );
 
   if (!show) return null;

src/pages/parts/player/ScrapeErrorPart.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 
 import { Button } from "@/components/buttons/Button";
 import { Icons } from "@/components/Icon";
@@ -9,6 +10,7 @@ import { Paragraph } from "@/components/text/Paragraph";
 import { Title } from "@/components/text/Title";
 import { ScrapingItems, ScrapingSegment } from "@/hooks/useProviderScrape";
 import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
+import { getProviderApiUrls } from "@/utils/proxyUrls";
 
 import { ErrorCardInModal } from "../errors/ErrorCard";
 
@@ -22,21 +24,21 @@ export interface ScrapeErrorPartProps {
 export function ScrapeErrorPart(props: ScrapeErrorPartProps) {
   const { t } = useTranslation();
   const modal = useModal("error");
+  const location = useLocation();
 
   const error = useMemo(() => {
     const data = props.data;
-    const amountError = Object.values(data.sources).filter(
-      (v) => v.status === "failure",
-    );
-    if (amountError.length === 0) return null;
     let str = "";
+    const apiUrls = getProviderApiUrls();
+    str += `URL - ${location.pathname}\n`;
+    str += `API - ${apiUrls.length > 0}\n\n`;
     Object.values(data.sources).forEach((v) => {
       str += `${v.id}: ${v.status}\n`;
       if (v.reason) str += `${v.reason}\n`;
       if (v.error) str += `${v.error.toString()}\n`;
     });
     return str;
-  }, [props]);
+  }, [props, location]);
 
   return (
     <ErrorLayout>