Merge pull request #56 from AbdullahDaGoat/modal

Popup and Episode Selectors Updated for Modal (as per the nerds request)

src/backend/metadata/types/tmdb.ts

@@ -1,289 +1,309 @@
-export enum TMDBContentTypes {
+import slugify from "slugify";
-  MOVIE = "movie",
+
-  TV = "tv",
+import { conf } from "@/setup/config";
+import { MediaItem } from "@/utils/mediaTypes";
+
+import { MWMediaMeta, MWMediaType, MWSeasonMeta } from "./types/mw";
+import {
+  ExternalIdMovieSearchResult,
+  TMDBContentTypes,
+  TMDBEpisodeShort,
+  TMDBMediaResult,
+  TMDBMovieData,
+  TMDBMovieSearchResult,
+  TMDBSearchResult,
+  TMDBSeason,
+  TMDBSeasonMetaResult,
+  TMDBShowData,
+  TMDBShowSearchResult,
+} from "./types/tmdb";
+import { mwFetch } from "../helpers/fetch";
+
+export function mediaTypeToTMDB(type: MWMediaType): TMDBContentTypes {
+  if (type === MWMediaType.MOVIE) return TMDBContentTypes.MOVIE;
+  if (type === MWMediaType.SERIES) return TMDBContentTypes.TV;
+  throw new Error("unsupported type");
 }
 
-export type TMDBSeasonShort = {
+export function mediaItemTypeToMediaType(type: MediaItem["type"]): MWMediaType {
-  title: string;
+  if (type === "movie") return MWMediaType.MOVIE;
-  id: number;
+  if (type === "show") return MWMediaType.SERIES;
-  season_number: number;
+  throw new Error("unsupported type");
-};
+}
 
-export type TMDBEpisodeShort = {
+export function TMDBMediaToMediaType(type: TMDBContentTypes): MWMediaType {
-  title: string;
+  if (type === TMDBContentTypes.MOVIE) return MWMediaType.MOVIE;
-  id: number;
+  if (type === TMDBContentTypes.TV) return MWMediaType.SERIES;
-  episode_number: number;
+  throw new Error("unsupported type");
-  air_date: string;
+}
-};
 
-export type TMDBMediaResult = {
+export function TMDBMediaToMediaItemType(
-  title: string;
+  type: TMDBContentTypes,
-  poster?: string;
+): MediaItem["type"] {
-  id: number;
+  if (type === TMDBContentTypes.MOVIE) return "movie";
-  original_release_date?: Date;
+  if (type === TMDBContentTypes.TV) return "show";
-  object_type: TMDBContentTypes;
+  throw new Error("unsupported type");
-  seasons?: TMDBSeasonShort[];
+}
-};
 
-export type TMDBSeasonMetaResult = {
+export function formatTMDBMeta(
-  title: string;
+  media: TMDBMediaResult,
-  id: string;
+  season?: TMDBSeasonMetaResult,
-  season_number: number;
+): MWMediaMeta {
-  episodes: TMDBEpisodeShort[];
+  const type = TMDBMediaToMediaType(media.object_type);
-};
+  let seasons: undefined | MWSeasonMeta[];
+  if (type === MWMediaType.SERIES) {
+    seasons = media.seasons
+      ?.sort((a, b) => a.season_number - b.season_number)
+      .map(
+        (v): MWSeasonMeta => ({
+          title: v.title,
+          id: v.id.toString(),
+          number: v.season_number,
+        }),
+      );
+  }
 
-export interface TMDBShowData {
+  return {
-  adult: boolean;
+    title: media.title,
-  backdrop_path: string | null;
+    id: media.id.toString(),
-  created_by: {
+    year: media.original_release_date?.getFullYear()?.toString(),
-    id: number;
+    poster: media.poster,
-    credit_id: string;
+    type,
-    name: string;
+    seasons: seasons as any,
-    gender: number;
+    seasonData: season
-    profile_path: string | null;
+      ? {
-  }[];
+          id: season.id.toString(),
-  episode_run_time: number[];
+          number: season.season_number,
-  first_air_date: string;
+          title: season.title,
-  genres: {
+          episodes: season.episodes
-    id: number;
+            .sort((a, b) => a.episode_number - b.episode_number)
-    name: string;
+            .map((v) => ({
-  }[];
+              id: v.id.toString(),
-  homepage: string;
+              number: v.episode_number,
-  id: number;
+              title: v.title,
-  in_production: boolean;
+              air_date: v.air_date,
-  languages: string[];
+            })),
-  last_air_date: string;
+        }
-  last_episode_to_air: {
+      : (undefined as any),
-    id: number;
-    name: string;
-    overview: string;
-    vote_average: number;
-    vote_count: number;
-    air_date: string;
-    episode_number: number;
-    production_code: string;
-    runtime: number | null;
-    season_number: number;
-    show_id: number;
-    still_path: string | null;
-  } | null;
-  name: string;
-  next_episode_to_air: {
-    id: number;
-    name: string;
-    overview: string;
-    vote_average: number;
-    vote_count: number;
-    air_date: string;
-    episode_number: number;
-    production_code: string;
-    runtime: number | null;
-    season_number: number;
-    show_id: number;
-    still_path: string | null;
-  } | null;
-  networks: {
-    id: number;
-    logo_path: string;
-    name: string;
-    origin_country: string;
-  }[];
-  number_of_episodes: number;
-  number_of_seasons: number;
-  origin_country: string[];
-  original_language: string;
-  original_name: string;
-  overview: string;
-  popularity: number;
-  poster_path: string | null;
-  production_companies: {
-    id: number;
-    logo_path: string | null;
-    name: string;
-    origin_country: string;
-  }[];
-  production_countries: {
-    iso_3166_1: string;
-    name: string;
-  }[];
-  seasons: {
-    air_date: string;
-    episode_count: number;
-    id: number;
-    name: string;
-    overview: string;
-    poster_path: string | null;
-    season_number: number;
-  }[];
-  spoken_languages: {
-    english_name: string;
-    iso_639_1: string;
-    name: string;
-  }[];
-  status: string;
-  tagline: string;
-  type: string;
-  vote_average: number;
-  vote_count: number;
-  external_ids: {
-    imdb_id: string | null;
   };
 }
 
-export interface TMDBMovieData {
+export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
-  adult: boolean;
+  const type = TMDBMediaToMediaItemType(media.object_type);
-  backdrop_path: string | null;
+
-  belongs_to_collection: {
+  // Define the basic structure of MediaItem
-    id: number;
+  const mediaItem: MediaItem = {
-    name: string;
+    title: media.title,
-    poster_path: string | null;
+    id: media.id.toString(),
-    backdrop_path: string | null;
+    year: media.original_release_date?.getFullYear() ?? 0,
-  } | null;
+    release_date: media.original_release_date,
-  budget: number;
+    poster: media.poster,
-  genres: {
+    type,
-    id: number;
+    seasons: undefined,
-    name: string;
+  };
-  }[];
+
-  homepage: string | null;
+  // If it's a TV show, include the seasons information
-  id: number;
+  if (type === "show") {
-  imdb_id: string | null;
+    const seasons = media.seasons?.map((season) => ({
-  original_language: string;
+      title: season.title,
-  original_title: string;
+      id: season.id.toString(),
-  overview: string | null;
+      number: season.season_number,
-  popularity: number;
+    }));
-  poster_path: string | null;
+    mediaItem.seasons = seasons as MWSeasonMeta[];
-  production_companies: {
+  }
-    id: number;
+
-    logo_path: string | null;
+  return mediaItem;
-    name: string;
+}
-    origin_country: string;
+
-  }[];
+export function TMDBIdToUrlId(
-  production_countries: {
+  type: MWMediaType,
-    iso_3166_1: string;
+  tmdbId: string,
-    name: string;
+  title: string,
-  }[];
+) {
-  release_date: string;
+  return [
-  revenue: number;
+    "tmdb",
-  runtime: number | null;
+    mediaTypeToTMDB(type),
-  spoken_languages: {
+    tmdbId,
-    english_name: string;
+    slugify(title, { lower: true, strict: true }),
-    iso_639_1: string;
+  ].join("-");
-    name: string;
+}
-  }[];
+
-  status: string;
+export function TMDBMediaToId(media: MWMediaMeta): string {
-  tagline: string | null;
+  return TMDBIdToUrlId(media.type, media.id, media.title);
-  title: string;
+}
-  video: boolean;
+
-  vote_average: number;
+export function mediaItemToId(media: MediaItem): string {
-  vote_count: number;
+  return TMDBIdToUrlId(
-  external_ids: {
+    mediaItemTypeToMediaType(media.type),
-    imdb_id: string | null;
+    media.id,
+    media.title,
+  );
+}
+
+export function decodeTMDBId(
+  paramId: string,
+): { id: string; type: MWMediaType } | null {
+  const [prefix, type, id] = paramId.split("-", 3);
+  if (prefix !== "tmdb") return null;
+  let mediaType;
+  try {
+    mediaType = TMDBMediaToMediaType(type as TMDBContentTypes);
+  } catch {
+    return null;
+  }
+  return {
+    type: mediaType,
+    id,
   };
 }
 
-export interface TMDBEpisodeResult {
+const tmdbBaseUrl1 = "https://api.themoviedb.org/3";
-  season: number;
+const tmdbBaseUrl2 = "https://api.tmdb.org/3";
-  number: number;
+
-  title: string;
+const apiKey = conf().TMDB_READ_API_KEY;
-  ids: {
+
-    trakt: number;
+const tmdbHeaders = {
-    tvdb: number;
+  accept: "application/json",
-    imdb: string;
+  Authorization: `Bearer ${apiKey}`,
-    tmdb: number;
+};
+
+function abortOnTimeout(timeout: number): AbortSignal {
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), timeout);
+  return controller.signal;
+}
+
+export async function get<T>(url: string, params?: object): Promise<T> {
+  if (!apiKey) throw new Error("TMDB API key not set");
+  try {
+    return await mwFetch<T>(encodeURI(url), {
+      headers: tmdbHeaders,
+      baseURL: tmdbBaseUrl1,
+      params: {
+        ...params,
+      },
+      signal: abortOnTimeout(5000),
+    });
+  } catch (err) {
+    return mwFetch<T>(encodeURI(url), {
+      headers: tmdbHeaders,
+      baseURL: tmdbBaseUrl2,
+      params: {
+        ...params,
+      },
+      signal: abortOnTimeout(30000),
+    });
+  }
+}
+
+export async function multiSearch(
+  query: string,
+): Promise<(TMDBMovieSearchResult | TMDBShowSearchResult)[]> {
+  const data = await get<TMDBSearchResult>("search/multi", {
+    query,
+    include_adult: false,
+    language: "en-US",
+    page: 1,
+  });
+  // filter out results that aren't movies or shows
+  const results = data.results.filter(
+    (r) =>
+      r.media_type === TMDBContentTypes.MOVIE ||
+      r.media_type === TMDBContentTypes.TV,
+  );
+  return results;
+}
+
+export async function generateQuickSearchMediaUrl(
+  query: string,
+): Promise<string | undefined> {
+  const data = await multiSearch(query);
+  if (data.length === 0) return undefined;
+  const result = data[0];
+  const title =
+    result.media_type === TMDBContentTypes.MOVIE ? result.title : result.name;
+
+  return `/media/${TMDBIdToUrlId(
+    TMDBMediaToMediaType(result.media_type),
+    result.id.toString(),
+    title,
+  )}`;
+}
+
+// Conditional type which for inferring the return type based on the content type
+type MediaDetailReturn<T extends TMDBContentTypes> =
+  T extends TMDBContentTypes.MOVIE
+    ? TMDBMovieData
+    : T extends TMDBContentTypes.TV
+      ? TMDBShowData
+      : never;
+
+export function getMediaDetails<
+  T extends TMDBContentTypes,
+  TReturn = MediaDetailReturn<T>,
+>(id: string, type: T): Promise<TReturn> {
+  if (type === TMDBContentTypes.MOVIE) {
+    return get<TReturn>(`/movie/${id}`, { append_to_response: "external_ids" });
+  }
+  if (type === TMDBContentTypes.TV) {
+    return get<TReturn>(`/tv/${id}`, { append_to_response: "external_ids" });
+  }
+  throw new Error("Invalid media type");
+}
+
+export function getMediaPoster(posterPath: string | null): string | undefined {
+  if (posterPath) return `https://image.tmdb.org/t/p/w342/${posterPath}`;
+}
+
+export async function getEpisodes(
+  id: string,
+  season: number,
+): Promise<TMDBEpisodeShort[]> {
+  const data = await get<TMDBSeason>(`/tv/${id}/season/${season}`);
+  return data.episodes.map((e) => ({
+    id: e.id,
+    episode_number: e.episode_number,
+    title: e.name,
+    air_date: e.air_date,
+  }));
+}
+
+export async function getMovieFromExternalId(
+  imdbId: string,
+): Promise<string | undefined> {
+  const data = await get<ExternalIdMovieSearchResult>(`/find/${imdbId}`, {
+    external_source: "imdb_id",
+  });
+
+  const movie = data.movie_results[0];
+  if (!movie) return undefined;
+
+  return movie.id.toString();
+}
+
+export function formatTMDBSearchResult(
+  result: TMDBMovieSearchResult | TMDBShowSearchResult,
+  mediatype: TMDBContentTypes,
+): TMDBMediaResult {
+  const type = TMDBMediaToMediaType(mediatype);
+  if (type === MWMediaType.SERIES) {
+    const show = result as TMDBShowSearchResult;
+    return {
+      title: show.name,
+      poster: getMediaPoster(show.poster_path),
+      id: show.id,
+      original_release_date: new Date(show.first_air_date),
+      object_type: mediatype,
+    };
+  }
+
+  const movie = result as TMDBMovieSearchResult;
+
+  return {
+    title: movie.title,
+    poster: getMediaPoster(movie.poster_path),
+    id: movie.id,
+    original_release_date: new Date(movie.release_date),
+    object_type: mediatype,
   };
 }
-
-export interface TMDBEpisode {
-  air_date: string;
-  episode_number: number;
-  id: number;
-  name: string;
-  overview: string;
-  production_code: string;
-  runtime: number;
-  season_number: number;
-  show_id: number;
-  still_path: string | null;
-  vote_average: number;
-  vote_count: number;
-  crew: any[];
-  guest_stars: any[];
-}
-
-export interface TMDBSeason {
-  _id: string;
-  air_date: string;
-  episodes: TMDBEpisode[];
-  name: string;
-  overview: string;
-  id: number;
-  poster_path: string | null;
-  season_number: number;
-}
-
-export interface ExternalIdMovieSearchResult {
-  movie_results: {
-    adult: boolean;
-    backdrop_path: string;
-    id: number;
-    title: string;
-    original_language: string;
-    original_title: string;
-    overview: string;
-    poster_path: string;
-    media_type: string;
-    genre_ids: number[];
-    popularity: number;
-    release_date: string;
-    video: boolean;
-    vote_average: number;
-    vote_count: number;
-  }[];
-  person_results: any[];
-  tv_results: any[];
-  tv_episode_results: any[];
-  tv_season_results: any[];
-}
-
-export interface TMDBMovieSearchResult {
-  adult: boolean;
-  backdrop_path: string;
-  id: number;
-  title: string;
-  original_language: string;
-  original_title: string;
-  overview: string;
-  poster_path: string;
-  media_type: TMDBContentTypes.MOVIE;
-  genre_ids: number[];
-  popularity: number;
-  release_date: string;
-  video: boolean;
-  vote_average: number;
-  vote_count: number;
-}
-
-export interface TMDBShowSearchResult {
-  adult: boolean;
-  backdrop_path: string;
-  id: number;
-  name: string;
-  original_language: string;
-  original_name: string;
-  overview: string;
-  poster_path: string;
-  media_type: TMDBContentTypes.TV;
-  genre_ids: number[];
-  popularity: number;
-  first_air_date: string;
-  vote_average: number;
-  vote_count: number;
-  origin_country: string[];
-}
-
-export interface TMDBSearchResult {
-  page: number;
-  results: (TMDBMovieSearchResult | TMDBShowSearchResult)[];
-  total_pages: number;
-  total_results: number;
-}

src/components/media/ModalEpisodeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { get } from "@/backend/metadata/tmdb";
 import { conf } from "@/setup/config";
@@ -11,22 +11,8 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
   const [seasonsData, setSeasonsData] = useState<any[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
 
-  useEffect(() => {
+  const handleSeasonSelect = useCallback(
-    const fetchSeasons = async () => {
+    async (season: any) => {
-      try {
-        const showDetails = await get<any>(`/tv/${tmdbId}`, {
-          api_key: conf().TMDB_READ_API_KEY,
-          language: "en-US",
-        });
-        setSeasonsData(showDetails.seasons);
-      } catch (err) {
-        console.error(err);
-      }
-    };
-    fetchSeasons();
-  }, [tmdbId]);
-
-  const handleSeasonSelect = async (season: any) => {
       try {
         const seasonDetails = await get<any>(
           `/tv/${tmdbId}/season/${season.season_number}`,
@@ -39,46 +25,69 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
       } catch (err) {
         console.error(err);
       }
+    },
+    [tmdbId],
+  );
+
+  useEffect(() => {
+    const fetchSeasons = async () => {
+      try {
+        const showDetails = await get<any>(`/tv/${tmdbId}`, {
+          api_key: conf().TMDB_READ_API_KEY,
+          language: "en-US",
+        });
+        setSeasonsData(showDetails.seasons);
+        handleSeasonSelect(showDetails.seasons[0]); // Default to first season
+      } catch (err) {
+        console.error(err);
+      }
     };
+    fetchSeasons();
+  }, [handleSeasonSelect, tmdbId]);
 
   return (
-    <div className="flex p-2 mt-4 bg-mediaCard-hoverBackground rounded max-h-48 overflow-hidden">
+    <div className="flex flex-row">
-      <div className="flex-none w-20 overflow-y-auto max-h-48">
+      <div className="sm:w-96 w-96 sm:block flex-auto cursor-pointer overflow-y-scroll overflow-x-hidden max-h-52 scrollbar-track-gray-300">
         {seasonsData.map((season) => (
           <div
             key={season.season_number}
             onClick={() => handleSeasonSelect(season)}
-            className="cursor-pointer hover:bg-search-background p-1 text-center rounded"
+            className="cursor-pointer hover:bg-search-background p-1 text-center rounded hover:scale-95 transition-transform duration-300"
           >
             S{season.season_number}
           </div>
         ))}
       </div>
-      <div className="flex-auto p-2 overflow-y-auto max-h-96">
+      <div className="flex-auto mt-4 cursor-pointer sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-52 order-1 sm:order-2">
+        <div className="grid grid-cols-3 gap-2">
           {selectedSeason ? (
-          <div>
+            selectedSeason.episodes.map(
-            <h2>
+              (episode: {
-              {selectedSeason.name} - {selectedSeason.episodes.length} episodes
+                episode_number: number;
-            </h2>
+                name: string;
-            <ul>
+                still_path: string;
-              {selectedSeason.episodes.map(
+              }) => (
-                (
+                <div
-                  episode: { episode_number: number; name: string },
+                  key={episode.episode_number}
-                  index: number,
+                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 hover:border-purple-500 hover:border-2 transition-all duration-300 relative"
-                ) => (
+                >
-                  <li key={episode.episode_number}>
+                  <img
-                    {episode.episode_number}. {episode.name}
+                    src={`https://image.tmdb.org/t/p/w300/${episode.still_path}`}
-                  </li>
+                    alt={episode.name}
+                    className="w-full h-auto rounded"
+                  />
+                  <p className="text-center mt-2">{episode.name}</p>
+                  <div className="absolute inset-0 opacity-0 hover:opacity-20 transition-opacity duration-300 bg-purple-500 rounded pointer-events-none" />
+                </div>
               ),
-              )}
+            )
-            </ul>
-          </div>
           ) : (
-          <div>
+            <div className="text-center w-full">
-            <p>Select a season to see details</p>
+              Select a season to see episodes
             </div>
           )}
         </div>
       </div>
+    </div>
   );
 }

src/components/media/PopupModal.tsx

@@ -37,6 +37,7 @@ function formatRuntime(runtime: number) {
 export function PopupModal({
   isVisible,
   onClose,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   playingTitle,
   media,
 }: PopupModalProps) {
@@ -48,6 +49,8 @@ export function PopupModal({
   const [data, setData] = useState<any>(null);
   const [mediaInfo, setMediaInfo] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [menuOpen, setMenuOpen] = useState<boolean>(false); // Added definition for menuOpen
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -149,15 +152,19 @@ export function PopupModal({
 
   return (
     <div
-      className="fixed inset-0 bg-opacity-50 flex justify-center items-center z-50 transition-opacity duration-100"
+      className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center sm:items-start z-50 transition-opacity duration-100 top-10 sm:top-10"
       style={{ opacity: style.opacity, visibility: style.visibility }}
     >
       <div
         ref={modalRef}
-        className="rounded-xl p-3 m-4 sm:m-8 bg-modal-background flex justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto"
+        className="rounded-xl bg-modal-background flex flex-col justify-center items-center transition-opacity duration-100 max-w-full sm:max-w-xl w-full sm:w-auto sm:h-auto overflow-y-auto p-4"
-        style={{ opacity: style.opacity }}
+        style={{
+          opacity: style.opacity,
+          maxHeight: "90vh",
+          height: "auto",
+        }}
       >
-        <div className="aspect-w-16 aspect-h-9 overflow-y-auto w-full sm:w-auto">
+        <div className="aspect-w-16 aspect-h-9 w-full sm:w-auto">
           <div className="rounded-xl">
             {data?.backdrop_path ? (
               <img
@@ -165,6 +172,9 @@ export function PopupModal({
                 alt={media.poster ? "" : "failed to fetch :("}
                 className="rounded-xl object-cover w-full h-full"
                 loading="lazy"
+                style={{
+                  maxHeight: "60vh",
+                }}
               />
             ) : (
               <Skeleton />
@@ -249,8 +259,9 @@ export function PopupModal({
                     </div>
                   </div>
                 ))
-              : Array.from({ length: 3 }).map((_) => (
+              : Array.from({ length: 3 }).map((_, i) => (
-                  <div className="inline-block">
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={i} className="inline-block">
                     <Skeleton />
                   </div>
                 ))}

src/pages/parts/home/BookmarksPart.tsx

@@ -17,39 +17,48 @@ export function BookmarksPart({
   onItemsChange: (hasItems: boolean) => void;
 }) {
   const { t } = useTranslation();
-  const progressItems = useProgressStore((s) => s.items);
+  const progressItems = useProgressStore((state) => state.items);
-  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const bookmarks = useBookmarkStore((state) => state.bookmarks);
-  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
+  const removeBookmark = useBookmarkStore((state) => state.removeBookmark);
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
 
   const items = useMemo(() => {
-    let output: MediaItem[] = [];
+    // Transform bookmarks object into an array of MediaItem
-    Object.entries(bookmarks).forEach((entry) => {
+    const transformedItems: MediaItem[] = Object.keys(bookmarks).map((id) => {
-      output.push({
+      const { title, year, poster, type, updatedAt } = bookmarks[id];
-        id: entry[0],
+      return {
-        ...entry[1],
+        id,
+        title,
+        year,
+        poster,
+        type,
+        updatedAt,
+        seasons: type === "show" ? [] : undefined, // Ensure seasons is defined for 'show' type
+      };
     });
-    });
-    output = output.sort((a, b) => {
-      const bookmarkA = bookmarks[a.id];
-      const bookmarkB = bookmarks[b.id];
-      const progressA = progressItems[a.id];
-      const progressB = progressItems[b.id];
 
-      const dateA = Math.max(bookmarkA.updatedAt, progressA?.updatedAt ?? 0);
+    // Sort items based on the latest update time
-      const dateB = Math.max(bookmarkB.updatedAt, progressB?.updatedAt ?? 0);
+    transformedItems.sort((a, b) => {
-
+      const aUpdatedAt = Math.max(
-      return dateB - dateA;
+        bookmarks[a.id].updatedAt,
+        progressItems[a.id]?.updatedAt ?? 0,
+      );
+      const bUpdatedAt = Math.max(
+        bookmarks[b.id].updatedAt,
+        progressItems[b.id]?.updatedAt ?? 0,
+      );
+      return bUpdatedAt - aUpdatedAt;
     });
-    return output;
+
+    return transformedItems;
   }, [bookmarks, progressItems]);
 
   useEffect(() => {
-    onItemsChange(items.length > 0);
+    onItemsChange(items.length > 0); // Notify parent component if there are items
   }, [items, onItemsChange]);
 
-  if (items.length === 0) return null;
+  if (items.length === 0) return null; // If there are no items, return null
 
   return (
     <div>
@@ -60,12 +69,12 @@ export function BookmarksPart({
         <EditButton editing={editing} onEdit={setEditing} />
       </SectionHeading>
       <MediaGrid ref={gridRef}>
-        {items.map((v) => (
+        {items.map((item) => (
           <WatchedMediaCard
-            key={v.id}
+            key={item.id}
-            media={v}
+            media={item}
             closable={editing}
-            onClose={() => removeBookmark(v.id)}
+            onClose={() => removeBookmark(item.id)}
           />
         ))}
       </MediaGrid>