Merge pull request #1150 from movie-web/fix/#962

decrease amount of margin of edit button on small screens

src/assets/locales/en.json

@@ -278,7 +278,8 @@
         "loadingError": "Error loading season",
         "loadingList": "Loading...",
         "loadingTitle": "Loading...",
-        "unairedEpisodes": "One or more episodes in this season have been disabled because they haven't been aired yet."
+        "unairedEpisodes": "One or more episodes in this season have been disabled because they haven't been aired yet.",
+        "seasons": "Seasons"
       },
       "playback": {
         "speedLabel": "Playback speed",

src/backend/metadata/tmdb.ts

@@ -153,6 +153,12 @@ const tmdbHeaders = {
   Authorization: `Bearer ${apiKey}`,
 };
 
+function abortOnTimeout(timeout: number): AbortSignal {
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), timeout);
+  return controller.signal;
+}
+
 async function get<T>(url: string, params?: object): Promise<T> {
   if (!apiKey) throw new Error("TMDB API key not set");
   try {
@@ -162,7 +168,7 @@ async function get<T>(url: string, params?: object): Promise<T> {
       params: {
         ...params,
       },
-      signal: AbortSignal.timeout(5000),
+      signal: abortOnTimeout(5000),
     });
   } catch (err) {
     return mwFetch<T>(encodeURI(url), {
@@ -171,7 +177,7 @@ async function get<T>(url: string, params?: object): Promise<T> {
       params: {
         ...params,
       },
-      signal: AbortSignal.timeout(30000),
+      signal: abortOnTimeout(30000),
     });
   }
 }

src/components/buttons/EditButton.tsx

@@ -25,7 +25,7 @@ export function EditButton(props: EditButtonProps) {
     >
       <span ref={parent}>
         {props.editing ? (
-          <span className="mx-4 whitespace-nowrap">
+          <span className="mx-2 sm:mx-4 whitespace-nowrap">
             {t("home.mediaList.stopEditing")}
           </span>
         ) : (

src/components/player/atoms/Episodes.tsx

@@ -212,9 +212,16 @@ function EpisodesView({
 
   return (
     <Menu.CardWithScrollable>
-      <Menu.BackLink onClick={goBack}>
+      <Menu.BackLink
+        onClick={goBack}
+        rightSide={
+          <span>
             {loadingState?.value?.season.title ||
               t("player.menus.episodes.loadingTitle")}
+          </span>
+        }
+      >
+        {t("player.menus.episodes.seasons")}
       </Menu.BackLink>
       {content}
     </Menu.CardWithScrollable>

src/components/player/atoms/NextEpisodeButton.tsx

@@ -46,10 +46,14 @@ function Button(props: {
   );
 }
 
-function useSeasons(mediaId: string, isLastEpisode: boolean = false) {
+function useSeasons(
+  mediaId: string | undefined,
+  isLastEpisode: boolean = false,
+) {
   const state = useAsync(async () => {
     if (isLastEpisode) {
-      const data = await getMetaFromId(MWMediaType.SERIES, mediaId ?? "");
+      if (!mediaId) return null;
+      const data = await getMetaFromId(MWMediaType.SERIES, mediaId);
       if (data?.meta.type !== MWMediaType.SERIES) return null;
       return data.meta.seasons;
     }
@@ -60,13 +64,14 @@ function useSeasons(mediaId: string, isLastEpisode: boolean = false) {
 
 function useNextSeasonEpisode(
   nextSeason: MWSeasonMeta | undefined,
-  mediaId: string,
+  mediaId: string | undefined,
 ) {
   const state = useAsync(async () => {
     if (nextSeason) {
+      if (!mediaId) return null;
       const data = await getMetaFromId(
         MWMediaType.SERIES,
-        mediaId ?? "",
+        mediaId,
         nextSeason?.id,
       );
       if (data?.meta.type !== MWMediaType.SERIES) return null;
@@ -106,18 +111,17 @@ export function NextEpisodeButton(props: {
   const enableAutoplay = usePreferencesStore((s) => s.enableAutoplay);
 
   const isLastEpisode =
-    meta?.episode?.number === meta?.episodes?.at(-1)?.number;
+    !meta?.episode?.number || !meta?.episodes?.at(-1)?.number
+      ? false
+      : meta.episode.number === meta.episodes.at(-1)!.number;
 
-  const seasons = useSeasons(meta?.tmdbId ?? "", isLastEpisode);
+  const seasons = useSeasons(meta?.tmdbId, isLastEpisode);
 
   const nextSeason = seasons.value?.find(
     (season) => season.number === (meta?.season?.number ?? 0) + 1,
   );
 
-  const nextSeasonEpisode = useNextSeasonEpisode(
+  const nextSeasonEpisode = useNextSeasonEpisode(nextSeason, meta?.tmdbId);
-    nextSeason,
-    meta?.tmdbId ?? "",
-  );
 
   let show = false;
   const hasAutoplayed = useRef(false);