feat: replace tv show icon

components/Image.tsx

@@ -1,3 +1,4 @@
+import { asset } from "$fresh/runtime.ts";
 import * as CSS from "https://esm.sh/csstype@3.1.2";
 
 const Image = (
@@ -14,7 +15,7 @@ const Image = (
     <img
       alt={props.alt}
       style={props.style}
-      src={props.src}
+      src={asset(props.src)}
       width={props.width}
       height={props.height}
       class={props.class}

components/MovieCard.tsx

@@ -3,36 +3,20 @@ import { Movie } from "@lib/resource/movies.ts";
 import { Series } from "@lib/resource/series.ts";
 import { isLocalImage } from "@lib/string.ts";
 
-export function MovieCard({ movie }: { movie: Movie }) {
+export function MovieCard(
+  { movie, sublink = "movies" }: { sublink?: string; movie: Movie | Series },
+) {
   const { meta: { image = "/placeholder.svg" } = {} } = movie;
 
   const imageUrl = isLocalImage(image)
     ? `/api/images?image=${image}&width=200&height=200`
     : image;
 
-  console.log({ imageUrl, image });
-
   return (
     <Card
       title={movie.name}
       image={imageUrl}
-      link={`/movies/${movie.id}`}
+      link={`/${sublink}/${movie.id}`}
-    />
-  );
-}
-
-export function SeriesCard({ series }: { series: Series }) {
-  const { meta: { image = "/placeholder.svg" } = {} } = series;
-
-  const imageUrl = image?.startsWith("Media/series/")
-    ? `/api/images?image=${image}&width=200&height=200`
-    : image;
-
-  return (
-    <Card
-      title={series.name}
-      image={imageUrl}
-      link={`/series/${series.id}`}
     />
   );
 }

components/layouts/main.tsx

@@ -38,7 +38,7 @@ export const MainLayout = ({ children, url, title, context }: Props) => {
                   m.link === url.pathname ? "bg-white text-black" : "text-white"
                 } p-3 text-xl w-full rounded-2xl`}
               >
-                 {m.emoji} {m.name}
+                {m.emoji} {m.name}
               </a>
             );
           })}

islands/KMenu/commands/add_series_infos.ts

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

islands/Search.tsx

@@ -78,7 +78,7 @@ export const SearchResultList = (
 };
 
 const Search = (
-  { q, type }: { q: string; type?: string },
+  { q = "*", type }: { q: string; type?: string },
 ) => {
   const [searchQuery, setSearchQuery] = useState(q);
   const [data, setData] = useState<SearchResult>();
@@ -99,9 +99,7 @@ const Search = (
     window.history.replaceState({}, "", u);
   }
 
-  console.log({ showSeen: showSeenStatus.value });
+  const fetchData = async (query: string, showSeen: boolean) => {
-
-  const fetchData = async (query: string) => {
     try {
       setIsLoading(true);
       const fetchUrl = new URL(window.location.href);
@@ -111,7 +109,7 @@ const Search = (
       } else {
         return;
       }
-      if (showSeenStatus.value) {
+      if (showSeen) {
         fetchUrl.searchParams.set("status", "not-seen");
       }
       if (type) {
@@ -139,12 +137,15 @@ const Search = (
     const target = event.target as HTMLInputElement;
     if (target.value !== searchQuery) {
       setSearchQuery(target.value);
-      debouncedFetchData(target.value); // Call the debounced fetch function with the updated search query
     }
   };
 
   useEffect(() => {
-    debouncedFetchData(q);
+    debouncedFetchData(searchQuery, showSeenStatus.value); // Call the debounced fetch function with the updated search query
+  }, [searchQuery, showSeenStatus.value]);
+
+  useEffect(() => {
+    debouncedFetchData(q, showSeenStatus.value);
   }, []);
 
   return (

lib/resources.ts

@@ -24,7 +24,7 @@ export const resources = {
     prefix: "Media/articles/",
   },
   "series": {
-    emoji: "🎥",
+    emoji: "📺",
     name: "Series",
     link: "/series",
     prefix: "Media/series/",

lib/typesense.ts

@@ -77,6 +77,7 @@ async function initializeTypesense() {
           { name: "type", type: "string", facet: true },
           { name: "date", type: "string", optional: true },
           { name: "author", type: "string", facet: true, optional: true },
+          { name: "status", type: "string", facet: true, optional: true },
           { name: "rating", type: "int32", facet: true },
           { name: "tags", type: "string[]", facet: true },
           { name: "description", type: "string", optional: true },

routes/api/images/index.ts

@@ -23,7 +23,7 @@ type ImageParams = {
 const log = createLogger("api/image");
 
 async function getRemoteImage(image: string) {
-  log.debug("[api/image] fetching", { image });
+  log.debug("fetching", { image });
   const sourceRes = await fetch(image);
   if (!sourceRes.ok) {
     return "Error retrieving image from URL.";
@@ -68,6 +68,10 @@ function modifyImage(
       format = MagickFormat.Webp;
     }
 
+    if (params.mediaType === "image/png") {
+      format = MagickFormat.Png;
+    }
+
     ImageMagick.read(imageBuffer, format, (image) => {
       const sizingData = getWidthHeight(image, params);
       if (params.mode === "resize") {

routes/api/resources.ts

@@ -22,6 +22,11 @@ export const handler: Handlers = {
       filter_by.push(`type:=${type}`);
     }
 
+    const status = url.searchParams.get("status");
+    if (status) {
+      filter_by.push(`status:=${status}`);
+    }
+
     const hashTags = extractHashTags(query);
     if (hashTags?.length) {
       filter_by.push(`tags:[${hashTags.map((t) => `\`${t}\``).join(",")}]`);

routes/series/[name].tsx

@@ -9,8 +9,8 @@ import { KMenu } from "@islands/KMenu.tsx";
 
 export const handler: Handlers<Series | null> = {
   async GET(_, ctx) {
-    const movie = await getSeries(ctx.params.name);
+    const series = await getSeries(ctx.params.name);
-    return ctx.render(movie);
+    return ctx.render(series);
   },
 };
 

routes/series/index.tsx

@@ -3,10 +3,9 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { getAllSeries, Series } from "@lib/resource/series.ts";
-import { Card } from "@components/Card.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
-import { SeriesCard } from "@components/MovieCard.tsx";
+import { MovieCard } from "@components/MovieCard.tsx";
 
 export const handler: Handlers<Series[] | null> = {
   async GET(_, ctx) {
@@ -33,7 +32,7 @@ export default function Greet(props: PageProps<Series[] | null>) {
       </header>
       <Grid>
         {props.data?.map((doc) => {
-          return <SeriesCard series={doc} />;
+          return <MovieCard sublink="series" movie={doc} />;
         })}
       </Grid>
     </MainLayout>