Got it working / looking nice

src/backend/metadata/types/tmdb.ts

@@ -1,309 +1,289 @@
-import slugify from "slugify";
+export enum TMDBContentTypes {
-
+  MOVIE = "movie",
-import { conf } from "@/setup/config";
+  TV = "tv",
-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 function mediaItemTypeToMediaType(type: MediaItem["type"]): MWMediaType {
+export type TMDBSeasonShort = {
-  if (type === "movie") return MWMediaType.MOVIE;
+  title: string;
-  if (type === "show") return MWMediaType.SERIES;
+  id: number;
-  throw new Error("unsupported type");
+  season_number: number;
-}
-
-export function TMDBMediaToMediaType(type: TMDBContentTypes): MWMediaType {
-  if (type === TMDBContentTypes.MOVIE) return MWMediaType.MOVIE;
-  if (type === TMDBContentTypes.TV) return MWMediaType.SERIES;
-  throw new Error("unsupported type");
-}
-
-export function TMDBMediaToMediaItemType(
-  type: TMDBContentTypes,
-): MediaItem["type"] {
-  if (type === TMDBContentTypes.MOVIE) return "movie";
-  if (type === TMDBContentTypes.TV) return "show";
-  throw new Error("unsupported type");
-}
-
-export function formatTMDBMeta(
-  media: TMDBMediaResult,
-  season?: TMDBSeasonMetaResult,
-): MWMediaMeta {
-  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,
-        }),
-      );
-  }
-
-  return {
-    title: media.title,
-    id: media.id.toString(),
-    year: media.original_release_date?.getFullYear()?.toString(),
-    poster: media.poster,
-    type,
-    seasons: seasons as any,
-    seasonData: season
-      ? {
-          id: season.id.toString(),
-          number: season.season_number,
-          title: season.title,
-          episodes: season.episodes
-            .sort((a, b) => a.episode_number - b.episode_number)
-            .map((v) => ({
-              id: v.id.toString(),
-              number: v.episode_number,
-              title: v.title,
-              air_date: v.air_date,
-            })),
-        }
-      : (undefined as any),
-  };
-}
-
-export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
-  const type = TMDBMediaToMediaItemType(media.object_type);
-
-  // Define the basic structure of MediaItem
-  const mediaItem: MediaItem = {
-    title: media.title,
-    id: media.id.toString(),
-    year: media.original_release_date?.getFullYear() ?? 0,
-    release_date: media.original_release_date,
-    poster: media.poster,
-    type,
-    seasons: undefined,
-  };
-
-  // If it's a TV show, include the seasons information
-  if (type === "show") {
-    const seasons = media.seasons?.map((season) => ({
-      title: season.title,
-      id: season.id.toString(),
-      number: season.season_number,
-    }));
-    mediaItem.seasons = seasons as MWSeasonMeta[];
-  }
-
-  return mediaItem;
-}
-
-export function TMDBIdToUrlId(
-  type: MWMediaType,
-  tmdbId: string,
-  title: string,
-) {
-  return [
-    "tmdb",
-    mediaTypeToTMDB(type),
-    tmdbId,
-    slugify(title, { lower: true, strict: true }),
-  ].join("-");
-}
-
-export function TMDBMediaToId(media: MWMediaMeta): string {
-  return TMDBIdToUrlId(media.type, media.id, media.title);
-}
-
-export function mediaItemToId(media: MediaItem): string {
-  return TMDBIdToUrlId(
-    mediaItemTypeToMediaType(media.type),
-    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,
-  };
-}
-
-const tmdbBaseUrl1 = "https://api.themoviedb.org/3";
-const tmdbBaseUrl2 = "https://api.tmdb.org/3";
-
-const apiKey = conf().TMDB_READ_API_KEY;
-
-const tmdbHeaders = {
-  accept: "application/json",
-  Authorization: `Bearer ${apiKey}`,
 };
 
-function abortOnTimeout(timeout: number): AbortSignal {
+export type TMDBEpisodeShort = {
-  const controller = new AbortController();
+  title: string;
-  setTimeout(() => controller.abort(), timeout);
+  id: number;
-  return controller.signal;
+  episode_number: number;
-}
+  air_date: string;
+};
 
-export async function get<T>(url: string, params?: object): Promise<T> {
+export type TMDBMediaResult = {
-  if (!apiKey) throw new Error("TMDB API key not set");
+  title: string;
-  try {
+  poster?: string;
-    return await mwFetch<T>(encodeURI(url), {
+  id: number;
-      headers: tmdbHeaders,
+  original_release_date?: Date;
-      baseURL: tmdbBaseUrl1,
+  object_type: TMDBContentTypes;
-      params: {
+  seasons?: TMDBSeasonShort[];
-        ...params,
+};
-      },
-      signal: abortOnTimeout(5000),
-    });
-  } catch (err) {
-    return mwFetch<T>(encodeURI(url), {
-      headers: tmdbHeaders,
-      baseURL: tmdbBaseUrl2,
-      params: {
-        ...params,
-      },
-      signal: abortOnTimeout(30000),
-    });
-  }
-}
 
-export async function multiSearch(
+export type TMDBSeasonMetaResult = {
-  query: string,
+  title: string;
-): Promise<(TMDBMovieSearchResult | TMDBShowSearchResult)[]> {
+  id: string;
-  const data = await get<TMDBSearchResult>("search/multi", {
+  season_number: number;
-    query,
+  episodes: TMDBEpisodeShort[];
-    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(
+export interface TMDBShowData {
-  query: string,
+  adult: boolean;
-): Promise<string | undefined> {
+  backdrop_path: string | null;
-  const data = await multiSearch(query);
+  created_by: {
-  if (data.length === 0) return undefined;
+    id: number;
-  const result = data[0];
+    credit_id: string;
-  const title =
+    name: string;
-    result.media_type === TMDBContentTypes.MOVIE ? result.title : result.name;
+    gender: number;
-
+    profile_path: string | null;
-  return `/media/${TMDBIdToUrlId(
+  }[];
-    TMDBMediaToMediaType(result.media_type),
+  episode_run_time: number[];
-    result.id.toString(),
+  first_air_date: string;
-    title,
+  genres: {
-  )}`;
+    id: number;
-}
+    name: string;
-
+  }[];
-// Conditional type which for inferring the return type based on the content type
+  homepage: string;
-type MediaDetailReturn<T extends TMDBContentTypes> =
+  id: number;
-  T extends TMDBContentTypes.MOVIE
+  in_production: boolean;
-    ? TMDBMovieData
+  languages: string[];
-    : T extends TMDBContentTypes.TV
+  last_air_date: string;
-      ? TMDBShowData
+  last_episode_to_air: {
-      : never;
+    id: number;
-
+    name: string;
-export function getMediaDetails<
+    overview: string;
-  T extends TMDBContentTypes,
+    vote_average: number;
-  TReturn = MediaDetailReturn<T>,
+    vote_count: number;
->(id: string, type: T): Promise<TReturn> {
+    air_date: string;
-  if (type === TMDBContentTypes.MOVIE) {
+    episode_number: number;
-    return get<TReturn>(`/movie/${id}`, { append_to_response: "external_ids" });
+    production_code: string;
-  }
+    runtime: number | null;
-  if (type === TMDBContentTypes.TV) {
+    season_number: number;
-    return get<TReturn>(`/tv/${id}`, { append_to_response: "external_ids" });
+    show_id: number;
-  }
+    still_path: string | null;
-  throw new Error("Invalid media type");
+  } | null;
-}
+  name: string;
-
+  next_episode_to_air: {
-export function getMediaPoster(posterPath: string | null): string | undefined {
+    id: number;
-  if (posterPath) return `https://image.tmdb.org/t/p/w342/${posterPath}`;
+    name: string;
-}
+    overview: string;
-
+    vote_average: number;
-export async function getEpisodes(
+    vote_count: number;
-  id: string,
+    air_date: string;
-  season: number,
+    episode_number: number;
-): Promise<TMDBEpisodeShort[]> {
+    production_code: string;
-  const data = await get<TMDBSeason>(`/tv/${id}/season/${season}`);
+    runtime: number | null;
-  return data.episodes.map((e) => ({
+    season_number: number;
-    id: e.id,
+    show_id: number;
-    episode_number: e.episode_number,
+    still_path: string | null;
-    title: e.name,
+  } | null;
-    air_date: e.air_date,
+  networks: {
-  }));
+    id: number;
-}
+    logo_path: string;
-
+    name: string;
-export async function getMovieFromExternalId(
+    origin_country: string;
-  imdbId: string,
+  }[];
-): Promise<string | undefined> {
+  number_of_episodes: number;
-  const data = await get<ExternalIdMovieSearchResult>(`/find/${imdbId}`, {
+  number_of_seasons: number;
-    external_source: "imdb_id",
+  origin_country: string[];
-  });
+  original_language: string;
-
+  original_name: string;
-  const movie = data.movie_results[0];
+  overview: string;
-  if (!movie) return undefined;
+  popularity: number;
-
+  poster_path: string | null;
-  return movie.id.toString();
+  production_companies: {
-}
+    id: number;
-
+    logo_path: string | null;
-export function formatTMDBSearchResult(
+    name: string;
-  result: TMDBMovieSearchResult | TMDBShowSearchResult,
+    origin_country: string;
-  mediatype: TMDBContentTypes,
+  }[];
-): TMDBMediaResult {
+  production_countries: {
-  const type = TMDBMediaToMediaType(mediatype);
+    iso_3166_1: string;
-  if (type === MWMediaType.SERIES) {
+    name: string;
-    const show = result as TMDBShowSearchResult;
+  }[];
-    return {
+  seasons: {
-      title: show.name,
+    air_date: string;
-      poster: getMediaPoster(show.poster_path),
+    episode_count: number;
-      id: show.id,
+    id: number;
-      original_release_date: new Date(show.first_air_date),
+    name: string;
-      object_type: mediatype,
+    overview: string;
-    };
+    poster_path: string | null;
-  }
+    season_number: number;
-
+  }[];
-  const movie = result as TMDBMovieSearchResult;
+  spoken_languages: {
-
+    english_name: string;
-  return {
+    iso_639_1: string;
-    title: movie.title,
+    name: string;
-    poster: getMediaPoster(movie.poster_path),
+  }[];
-    id: movie.id,
+  status: string;
-    original_release_date: new Date(movie.release_date),
+  tagline: string;
-    object_type: mediatype,
+  type: string;
+  vote_average: number;
+  vote_count: number;
+  external_ids: {
+    imdb_id: string | null;
   };
 }
+
+export interface TMDBMovieData {
+  adult: boolean;
+  backdrop_path: string | null;
+  belongs_to_collection: {
+    id: number;
+    name: string;
+    poster_path: string | null;
+    backdrop_path: string | null;
+  } | null;
+  budget: number;
+  genres: {
+    id: number;
+    name: string;
+  }[];
+  homepage: string | null;
+  id: number;
+  imdb_id: string | null;
+  original_language: string;
+  original_title: string;
+  overview: string | null;
+  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;
+  }[];
+  release_date: string;
+  revenue: number;
+  runtime: number | null;
+  spoken_languages: {
+    english_name: string;
+    iso_639_1: string;
+    name: string;
+  }[];
+  status: string;
+  tagline: string | null;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+  external_ids: {
+    imdb_id: string | null;
+  };
+}
+
+export interface TMDBEpisodeResult {
+  season: number;
+  number: number;
+  title: string;
+  ids: {
+    trakt: number;
+    tvdb: number;
+    imdb: string;
+    tmdb: number;
+  };
+}
+
+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,15 +1,21 @@
 import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { get } from "@/backend/metadata/tmdb";
 import { conf } from "@/setup/config";
 
 interface ModalEpisodeSelectorProps {
   tmdbId: string;
+  mediaTitle: string;
 }
 
-export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
+export function EpisodeSelector({
+  tmdbId,
+  mediaTitle,
+}: ModalEpisodeSelectorProps) {
   const [seasonsData, setSeasonsData] = useState<any[]>([]);
   const [selectedSeason, setSelectedSeason] = useState<any>(null);
+  const navigate = useNavigate();
 
   const handleSeasonSelect = useCallback(
     async (season: any) => {
@@ -37,7 +43,12 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
           language: "en-US",
         });
         setSeasonsData(showDetails.seasons);
-        handleSeasonSelect(showDetails.seasons[0]); // Default to first season
+        if (showDetails.seasons[0] === 0) {
+          // Default to first season
+          handleSeasonSelect(showDetails.seasons[0]);
+        } else {
+          handleSeasonSelect(showDetails.seasons[1]);
+        }
       } catch (err) {
         console.error(err);
       }
@@ -47,18 +58,25 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
 
   return (
     <div className="flex flex-row">
-      <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">
+      <div className="sm:w-96 w-96 sm:block cursor-pointer overflow-y-scroll overflow-x-hidden max-h-60 max-w-24">
         {seasonsData.map((season) => (
           <div
             key={season.season_number}
             onClick={() => handleSeasonSelect(season)}
-            className="cursor-pointer hover:bg-search-background p-1 text-center rounded hover:scale-95 transition-transform duration-300"
+            className={`cursor-pointer p-1 text-center rounded transition-transform duration-200 ${
+              selectedSeason &&
+              season.season_number === selectedSeason.season_number
+                ? "bg-search-background"
+                : "hover:bg-search-background hover:scale-95"
+            }`}
           >
-            S{season.season_number}
+            {season.season_number !== 0
+              ? `S${season.season_number}`
+              : `Specials`}
           </div>
         ))}
       </div>
-      <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="flex-auto mt-4 cursor-pointer sm:mt-0 sm:ml-4 overflow-y-auto overflow-x-hidden max-h-60 order-1 sm:order-2">
         <div className="grid grid-cols-3 gap-2">
           {selectedSeason ? (
             selectedSeason.episodes.map(
@@ -66,18 +84,25 @@ export function EpisodeSelector({ tmdbId }: ModalEpisodeSelectorProps) {
                 episode_number: number;
                 name: string;
                 still_path: string;
+                show_id: number;
+                id: number;
               }) => (
                 <div
                   key={episode.episode_number}
-                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 hover:border-purple-500 hover:border-2 transition-all duration-300 relative"
+                  onClick={() =>
+                    navigate(
+                      `/media/tmdb-tv-${tmdbId}-${mediaTitle}/${episode.show_id}/${episode.id}`,
+                    )
+                  }
+                  className="bg-mediaCard-hoverBackground rounded p-2 hover:scale-95 transition-transform transition-border-color duration-[0.28s] ease-in-out transform-origin-center"
                 >
                   <img
-                    src={`https://image.tmdb.org/t/p/w300/${episode.still_path}`}
+                    src={`https://image.tmdb.org/t/p/w500/${episode.still_path}`}
-                    alt={episode.name}
                     className="w-full h-auto rounded"
                   />
-                  <p className="text-center mt-2">{episode.name}</p>
+                  <p className="text-center text-[0.95em] mt-2">
-                  <div className="absolute inset-0 opacity-0 hover:opacity-20 transition-opacity duration-300 bg-purple-500 rounded pointer-events-none" />
+                    {episode.name}
+                  </p>
                 </div>
               ),
             )

src/components/media/PopupModal.tsx

@@ -152,7 +152,7 @@ export function PopupModal({
 
   return (
     <div
-      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"
+      className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50 transition-opacity duration-100"
       style={{ opacity: style.opacity, visibility: style.visibility }}
     >
       <div
@@ -259,9 +259,8 @@ export function PopupModal({
                     </div>
                   </div>
                 ))
-              : Array.from({ length: 3 }).map((_, i) => (
+              : Array.from({ length: 3 }).map((_) => (
-                  // eslint-disable-next-line react/no-array-index-key
+                  <div className="inline-block">
-                  <div key={i} className="inline-block">
                     <Skeleton />
                   </div>
                 ))}
@@ -269,7 +268,11 @@ export function PopupModal({
           <div className="relative whitespace-normal font-medium overflow-y-auto max-h-32">
             {data?.overview}
           </div>
-          <div>{isTVShow ? <EpisodeSelector tmdbId={media.id} /> : null}</div>
+          <div className="pt-3">
+            {isTVShow ? (
+              <EpisodeSelector tmdbId={media.id} mediaTitle={media.title} />
+            ) : null}
+          </div>
           <div className="flex justify-center items-center mt-4 mb-1">
             <Button
               theme="purple"

src/pages/parts/home/BookmarksPart.tsx

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