feat: better cache some stuff

components/Card.tsx

@@ -12,7 +12,7 @@ export function Card(
   const backgroundStyle = {
     backgroundImage: `url(${image})`,
     backgroundSize: "cover",
-    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff3 inset",
+    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
   };
 
   if (backgroundSize !== 100) {
@@ -30,11 +30,14 @@ export function Card(
   sm:w-48 sm:h-48
   w-[37vw] h-[37vw]"
     >
-      <img
+      {!image?.includes("placeholder.svg") &&
-        class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
+        (
-        src={image}
+          <img
-        style={{ filter: "blur(30px)" }}
+            class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
-      />
+            src={image}
+            style={{ filter: "blur(30px)" }}
+          />
+        )}
       <div class="h-full flex flex-col justify-between relative z-10">
         <div>
           {/* Recipe Card content */}

islands/KMenu.tsx

@@ -1,5 +1,5 @@
 import { Signal, useSignal } from "@preact/signals";
-import { useRef } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import { useEventListener } from "@lib/hooks/useEventListener.ts";
 import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";

islands/KMenu/commands/add_movie_infos.ts

@@ -39,7 +39,7 @@ export const addMovieInfos: MenuEntry = {
     };
 
     state.activeMenu.value = menuID;
-
+    state.commandInput.value = "";
     state.activeState.value = "normal";
   },
   visible: () => {

islands/KMenu/commands/add_series_infos.ts

@@ -20,8 +20,6 @@ export const addSeriesInfo: MenuEntry = {
 
     const json = await response.json() as TMDBSeries[];
 
-    console.log("Result", json);
-
     const menuID = `result/${series.name}`;
 
     state.menus[menuID] = {
@@ -42,12 +40,8 @@ export const addSeriesInfo: MenuEntry = {
       })),
     };
 
-    await new Promise((res) => setTimeout(res, 20));
+    state.commandInput.value = "";
-
     state.activeMenu.value = menuID;
-
-    await new Promise((res) => setTimeout(res, 20));
-
     state.activeState.value = "normal";
   },
   visible: () => {

lib/cache/cache.ts

@@ -104,3 +104,27 @@ export async function set<T extends RedisValue>(
   }
   return res;
 }
+
+export const cacheFunction = async <T extends (() => Promise<unknown>)>(
+  {
+    fn,
+    id,
+    options = {},
+  }: {
+    fn: T;
+    id: string;
+    options?: RedisOptions;
+  },
+): Promise<Awaited<ReturnType<T>>> => {
+  const cacheResult = await get(id) as string;
+
+  if (cacheResult) {
+    return JSON.parse(cacheResult) as Awaited<ReturnType<typeof fn>>;
+  }
+
+  const result = await fn();
+
+  set(id, JSON.stringify(result), options);
+
+  return result as Awaited<ReturnType<typeof fn>>;
+};

lib/resource/movies.ts

@@ -19,10 +19,10 @@ export type Movie = {
   };
 };
 
-function renderMovie(movie: Movie) {
+export function renderMovie(movie: Movie) {
   const meta = movie.meta;
-  if ("date" in meta) {
+  if ("date" in meta && typeof meta.date !== "string") {
-    meta.date = formatDate(meta.date);
+    meta.date = formatDate(meta.date) as unknown as Date;
   }
 
   return fixRenderedMarkdown(`${

lib/tmdb.ts

@@ -2,29 +2,63 @@ import * as cache from "@lib/cache/cache.ts";
 import { MovieDb } from "https://esm.sh/moviedb-promise@3.4.1";
 const moviedb = new MovieDb(Deno.env.get("TMDB_API_KEY") || "");
 
-export function searchMovie(query: string) {
+const CACHE_INTERVAL = 1000 * 60 * 24 * 30;
-  return moviedb.searchMovie({ query });
-}
 
-export function searchTVShow(query: string) {
+export const searchMovie = (query: string) =>
-  return moviedb.searchTv({ query });
+  cache.cacheFunction({
-}
+    fn: () => moviedb.searchMovie({ query }),
+    id: `query:moviesearch:${query}`,
+    options: {
+      expires: CACHE_INTERVAL,
+    },
+  });
 
-export function getMovie(id: number) {
+export const searchTVShow = (query: string) =>
-  return moviedb.movieInfo({ id });
+  cache.cacheFunction(
-}
+    {
+      fn: () => moviedb.searchTv({ query }),
+      id: `query:tvshowsearch:${query}`,
+      options: {
+        expires: CACHE_INTERVAL,
+      },
+    },
+  );
 
-export function getSeries(id: number) {
+export const getMovie = (id: number) =>
-  return moviedb.tvInfo({ id });
+  cache.cacheFunction({
-}
+    fn: () => moviedb.movieInfo({ id }),
+    id: `query:movie:${id}`,
+    options: {
+      expires: CACHE_INTERVAL,
+    },
+  });
 
-export function getMovieCredits(id: number) {
+export const getSeries = (id: number) =>
-  return moviedb.movieCredits(id);
+  cache.cacheFunction({
-}
+    fn: () => moviedb.tvInfo({ id }),
+    id: `query:tvshow:${id}`,
+    options: {
+      expires: CACHE_INTERVAL,
+    },
+  });
 
-export function getSeriesCredits(id: number) {
+export const getMovieCredits = (id: number) =>
-  return moviedb.tvCredits(id);
+  cache.cacheFunction({
-}
+    fn: () => moviedb.movieCredits(id),
+    id: `query:moviecredits:${id}`,
+    options: {
+      expires: CACHE_INTERVAL,
+    },
+  });
+
+export const getSeriesCredits = (id: number) =>
+  cache.cacheFunction({
+    fn: () => moviedb.tvCredits(id),
+    id: `query:tvshowcredits:${id}`,
+    options: {
+      expires: CACHE_INTERVAL,
+    },
+  });
 
 export async function getMovieGenre(id: number) {
   const genres = await cache.get("/genres/movies");
@@ -36,14 +70,8 @@ export async function getSeriesGenre(id: number) {
 }
 
 export async function getMoviePoster(id: string): Promise<ArrayBuffer> {
-  const cachedPoster = await cache.get("posters:" + id);
-
-  if (cachedPoster) return cachedPoster as ArrayBuffer;
-
   const posterUrl = `https://image.tmdb.org/t/p/original/${id}`;
   const response = await fetch(posterUrl);
   const poster = await response.arrayBuffer();
-
-  cache.set(`posters:${id}`, new Uint8Array());
   return poster;
 }

routes/api/movies/enhance/[name].ts

@@ -1,62 +1,35 @@
 import { HandlerContext, Handlers } from "$fresh/server.ts";
-import {
+import { createDocument } from "@lib/documents.ts";
-  createDocument,
-  getDocument,
-  transformDocument,
-} from "@lib/documents.ts";
 import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
-import { getMovie, type Movie } from "@lib/resource/movies.ts";
+import { createMovie, getMovie } from "@lib/resource/movies.ts";
 import * as tmdb from "@lib/tmdb.ts";
-import { parse, stringify } from "https://deno.land/std@0.194.0/yaml/mod.ts";
+import { safeFileName } from "@lib/string.ts";
-import { formatDate, safeFileName } from "@lib/string.ts";
 import { json } from "@lib/helpers.ts";
-import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
+import {
+  AccessDeniedError,
+  BadRequestError,
+  NotFoundError,
+} from "@lib/errors.ts";
+import * as cache from "@lib/cache/cache.ts";
 
-async function updateMovieMetadata(
+const isString = (input: string | undefined): input is string => {
-  name: string,
+  return typeof input === "string";
-  metadata: Partial<Movie["meta"]>,
+};
-) {
-  const docId = `Media/movies/${name}.md`;
-
-  let currentDoc = await getDocument(docId);
-  if (!currentDoc) return;
-
-  if (!currentDoc.startsWith("---\n---\n")) {
-    currentDoc = `---\n---\n\n${currentDoc}`;
-  }
-
-  const newDoc = transformDocument(currentDoc, (root) => {
-    const frontmatterNode = root.children.find((c) => c.type === "yaml");
-
-    const frontmatter = frontmatterNode?.value as string;
-
-    const value = parse(frontmatter) as Movie["meta"];
-
-    const newValue = {
-      ...metadata,
-      date: formatDate(metadata.date),
-      ...value,
-    };
-
-    frontmatterNode.value = stringify(newValue);
-
-    return root;
-  });
-
-  return createDocument(docId, newDoc);
-}
 
 const POST = async (
   req: Request,
   ctx: HandlerContext,
 ): Promise<Response> => {
-  const movie = await getMovie(ctx.params.name);
-
   const session = ctx.state.session;
   if (!session) {
     throw new AccessDeniedError();
   }
 
+  const movie = await getMovie(ctx.params.name);
+  if (!movie) {
+    throw new NotFoundError();
+  }
+
   const body = await req.json();
   const name = ctx.params.name;
   const { tmdbId } = body;
@@ -69,33 +42,41 @@ const POST = async (
     await tmdb.getMovieCredits(tmdbId);
 
   const releaseDate = movieDetails.release_date;
-  const posterPath = movieDetails.poster_path;
+  if (releaseDate && !movie.meta.date) {
+    movie.meta.date = new Date(releaseDate);
+  }
+
   const director =
     movieCredits?.crew?.filter?.((person) => person.job === "Director")[0];
+  if (director && !movie.meta.author) {
+    movie.meta.author = director.name;
+  }
+
+  if (movieDetails.genres) {
+    movie.tags = [
+      ...new Set([
+        ...movie.tags.map((g) => g.toLowerCase()),
+        ...movieDetails.genres.map((g) => g.name?.toLowerCase()),
+      ].filter(isString)),
+    ];
+  }
 
   let finalPath = "";
+  const posterPath = movieDetails.poster_path;
   if (posterPath && !movie.meta.image) {
     const poster = await tmdb.getMoviePoster(posterPath);
     const extension = fileExtension(posterPath);
 
     finalPath = `Media/movies/images/${safeFileName(name)}_cover.${extension}`;
     await createDocument(finalPath, poster);
+    movie.meta.image = finalPath;
   }
 
-  const metadata = {} as Movie["meta"];
+  await createMovie(movie);
-  if (releaseDate) {
-    metadata.date = new Date(releaseDate);
-  }
-  if (finalPath) {
-    metadata.image = finalPath;
-  }
-  if (director) {
-    metadata.author = director.name;
-  }
 
-  await updateMovieMetadata(name, metadata);
+  cache.del(`documents:Media:movies:${name}.md`);
 
-  return json(movieCredits);
+  return json(movie);
 };
 
 export const handler: Handlers = {

routes/api/series/enhance/[name].ts

@@ -14,47 +14,12 @@ import {
   BadRequestError,
   NotFoundError,
 } from "@lib/errors.ts";
-import { getSeries, Series } from "@lib/resource/series.ts";
+import { createSeries, getSeries, Series } from "@lib/resource/series.ts";
+import * as cache from "@lib/cache/cache.ts";
 
-async function updateSeriesMetadata(
+const isString = (input: string | undefined): input is string => {
-  name: string,
+  return typeof input === "string";
-  metadata: Partial<Series["meta"]>,
+};
-) {
-  const docId = `Media/series/${name}.md`;
-
-  console.log({ docId, metadata });
-
-  let currentDoc = await getDocument(docId);
-  if (!currentDoc) {
-    throw new NotFoundError();
-  }
-
-  if (!currentDoc.startsWith("---\n---\n")) {
-    currentDoc = `---\n---\n\n${currentDoc}`;
-  }
-
-  const newDoc = transformDocument(currentDoc, (root) => {
-    const frontmatterNode = root.children.find((c) => c.type === "yaml");
-
-    const frontmatter = frontmatterNode?.value as string;
-
-    const value = parse(frontmatter) as Series["meta"];
-
-    const newValue = {
-      ...metadata,
-      date: formatDate(metadata.date),
-      ...value,
-    };
-
-    frontmatterNode.value = stringify(newValue);
-
-    return root;
-  });
-
-  console.log(newDoc);
-
-  return createDocument(docId, newDoc);
-}
 
 const POST = async (
   req: Request,
@@ -82,9 +47,24 @@ const POST = async (
     await tmdb.getSeriesCredits(tmdbId);
 
   const releaseDate = seriesDetails.first_air_date;
+  if (releaseDate && series.meta.date) {
+    series.meta.date = new Date(releaseDate);
+  }
   const posterPath = seriesDetails.poster_path;
   const director = seriesCredits &&
     seriesCredits.crew?.filter?.((person) => person.job === "Director")[0];
+  if (director && director.name && !series.meta.author) {
+    series.meta.author = director.name;
+  }
+
+  if (seriesDetails.genres) {
+    series.tags = [
+      ...new Set([
+        ...series.tags.map((t) => t.toLowerCase()),
+        ...seriesDetails.genres.map((g) => g.name?.toLowerCase()),
+      ].filter(isString)),
+    ];
+  }
 
   let finalPath = "";
   if (posterPath && !series.meta.image) {
@@ -93,22 +73,13 @@ const POST = async (
 
     finalPath = `Media/series/images/${safeFileName(name)}_cover.${extension}`;
     await createDocument(finalPath, poster);
+    series.meta.image = finalPath;
   }
+  await createSeries(series);
 
-  const metadata = {} as Series["meta"];
+  cache.del(`documents:Media:series:${name}.md`);
-  if (releaseDate) {
-    metadata.date = new Date(releaseDate);
-  }
-  if (finalPath) {
-    metadata.image = finalPath;
-  }
-  if (director && director.name) {
-    metadata.author = director.name;
-  }
 
-  await updateSeriesMetadata(name, metadata);
+  return json(series);
-
-  return json(seriesCredits);
 };
 
 export const handler: Handlers = {

routes/api/tmdb/query.ts

@@ -2,14 +2,6 @@ import { HandlerContext, Handlers } from "$fresh/server.ts";
 import { searchMovie, searchTVShow } from "@lib/tmdb.ts";
 import * as cache from "@lib/cache/cache.ts";
 import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
-import { json } from "@lib/helpers.ts";
-
-type CachedMovieQuery = {
-  lastUpdated: number;
-  data: unknown;
-};
-
-const CACHE_INTERVAL = 1000 * 60 * 24 * 30;
 
 const GET = async (
   req: Request,
@@ -30,27 +22,10 @@ const GET = async (
 
   const type = u.searchParams.get("type") || "movie";
 
-  const cacheId = `/${type}/query/${query}`;
-
-  const cachedResponse = await cache.get<CachedMovieQuery>(cacheId);
-  if (
-    cachedResponse && Date.now() < (cachedResponse.lastUpdated + CACHE_INTERVAL)
-  ) {
-    return json(cachedResponse.data);
-  }
-
   const res = type === "movie"
     ? await searchMovie(query)
     : await searchTVShow(query);
 
-  cache.set(
-    cacheId,
-    JSON.stringify({
-      lastUpdated: Date.now(),
-      data: res,
-    }),
-  );
-
   return new Response(JSON.stringify(res.results));
 };