Add fuzzy search - Merge pull request #107 from Duplicake-fyi/production

src/backend/metadata/search.ts

@@ -1,3 +1,5 @@
+import Fuse from "fuse.js";
+
 import { SimpleCache } from "@/utils/cache";
 import { MediaItem } from "@/utils/mediaTypes";
 
@@ -8,7 +10,11 @@ import {
   getMediaPoster,
   multiSearch,
 } from "./tmdb";
-import { TMDBContentTypes } from "./types/tmdb";
+import {
+  TMDBContentTypes,
+  TMDBMovieSearchResult,
+  TMDBShowSearchResult,
+} from "./types/tmdb";
 
 export interface MWQuery {
   searchQuery: string;
@@ -22,6 +28,76 @@ cache.initialize();
 
 // detect "tmdb:123456" or "tmdb:123456:movie" or "tmdb:123456:tv"
 const tmdbIdPattern = /^tmdb:(\d+)(?::(movie|tv))?$/i;
+const trailingYearPattern = /\s+\b(19|20)\d{2}\b$/;
+
+function normalizeQuery(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}\s]/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function getLenientQueries(searchQuery: string): string[] {
+  const base = searchQuery.trim();
+  if (base.length < 3) return [base];
+
+  const normalized = normalizeQuery(base);
+  const withoutTrailingYear = base.replace(trailingYearPattern, "").trim();
+  const normalizedWithoutYear = normalizeQuery(withoutTrailingYear);
+
+  const variants = [
+    ...new Set([base, normalized, withoutTrailingYear, normalizedWithoutYear]),
+  ].filter((q) => q.length > 0);
+
+  // Keep fanout small to avoid TMDB rate-limit pressure.
+  return variants.slice(0, 2);
+}
+
+function dedupeTMDBResults(
+  items: (TMDBMovieSearchResult | TMDBShowSearchResult)[],
+): (TMDBMovieSearchResult | TMDBShowSearchResult)[] {
+  const deduped = new Map<
+    string,
+    TMDBMovieSearchResult | TMDBShowSearchResult
+  >();
+
+  items.forEach((item) => {
+    deduped.set(`${item.media_type}:${item.id}`, item);
+  });
+
+  return Array.from(deduped.values());
+}
+
+function rankTMDBResultsFuzzy(
+  items: (TMDBMovieSearchResult | TMDBShowSearchResult)[],
+  query: string,
+): (TMDBMovieSearchResult | TMDBShowSearchResult)[] {
+  if (items.length <= 1) return items;
+
+  const fuse = new Fuse(items, {
+    includeScore: true,
+    ignoreLocation: true,
+    threshold: 0.45,
+    minMatchCharLength: 2,
+    keys: [
+      { name: "title", weight: 0.6 },
+      { name: "name", weight: 0.6 },
+      { name: "original_title", weight: 0.2 },
+      { name: "original_name", weight: 0.2 },
+    ],
+  });
+
+  const ranked = fuse.search(query).map((result) => result.item);
+  const rankedSet = new Set(
+    ranked.map((item) => `${item.media_type}:${item.id}`),
+  );
+  const remainder = items.filter(
+    (item) => !rankedSet.has(`${item.media_type}:${item.id}`),
+  );
+
+  return ranked.concat(remainder);
+}
 
 export async function searchForMedia(query: MWQuery): Promise<MediaItem[]> {
   if (cache.has(query)) return cache.get(query) as MediaItem[];
@@ -69,9 +145,28 @@ export async function searchForMedia(query: MWQuery): Promise<MediaItem[]> {
     }
   }
 
-  const data = await multiSearch(searchQuery);
+  const queryVariants = getLenientQueries(searchQuery);
+  const settledResults = await Promise.allSettled(
+    queryVariants.map((q) => multiSearch(q)),
+  );
+  const fulfilledResults = settledResults
+    .filter(
+      (
+        result,
+      ): result is PromiseFulfilledResult<
+        (TMDBMovieSearchResult | TMDBShowSearchResult)[]
+      > => result.status === "fulfilled",
+    )
+    .map((result) => result.value);
 
-  const results = data.map((v) => {
+  if (fulfilledResults.length === 0) {
+    return [];
+  }
+
+  const data = dedupeTMDBResults(fulfilledResults.flat());
+  const rankedData = rankTMDBResultsFuzzy(data, searchQuery);
+
+  const results = rankedData.map((v) => {
     const formattedResult = formatTMDBSearchResult(v, v.media_type);
     return formatTMDBMetaToMediaItem(formattedResult);
   });

src/components/form/SearchBar.tsx

@@ -26,7 +26,7 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
     const [showTooltip, setShowTooltip] = useState(false);
 
     function setSearch(value: string) {
-      props.onChange(value, true);
+      props.onChange(value, false);
     }
 
     useEffect(() => {

src/hooks/useSearchQuery.ts

@@ -21,6 +21,8 @@ export function useSearchQuery(): [
   const updateParams = (inp: string, commitToUrl = false) => {
     setSearch(inp);
     if (!commitToUrl) return;
+    const current = decode(params.query);
+    if (inp === current) return;
     if (inp.length === 0) {
       navigate("/", { replace: true });
       return;

src/pages/parts/search/SearchListPart.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { useAsyncFn } from "react-use";
 
 import { searchForMedia } from "@/backend/metadata/search";
 import { MWQuery } from "@/backend/metadata/types/mw";
@@ -10,6 +9,7 @@ import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
+import { useDebounce } from "@/hooks/useDebounce";
 import { Button } from "@/pages/About";
 import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
 import { MediaItem } from "@/utils/mediaTypes";
@@ -67,20 +67,47 @@ export function SearchListPart({
   const { t } = useTranslation();
 
   const [results, setResults] = useState<MediaItem[]>([]);
-  const [state, exec] = useAsyncFn((query: MWQuery) => searchForMedia(query));
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const requestIdRef = useRef(0);
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
 
   useEffect(() => {
-    async function runSearch(query: MWQuery) {
-      const searchResults = await exec(query);
-      if (!searchResults) return;
-      setResults(searchResults);
+    async function runSearch(query: MWQuery, requestId: number) {
+      setLoading(true);
+      setFailed(false);
+
+      let nextResults: MediaItem[] = [];
+      let didFail = false;
+      try {
+        nextResults = (await searchForMedia(query)) ?? [];
+      } catch {
+        didFail = true;
+      }
+
+      // Ignore stale responses from older requests.
+      if (requestIdRef.current !== requestId) {
+        return;
+      }
+
+      setFailed(didFail);
+      if (!didFail) setResults(nextResults);
+      setLoading(false);
     }
 
-    if (searchQuery !== "") runSearch({ searchQuery });
-  }, [searchQuery, exec]);
+    if (debouncedSearchQuery === "") {
+      setResults([]);
+      setLoading(false);
+      setFailed(false);
+      return;
+    }
 
-  if (state.loading) return <SearchLoadingPart />;
-  if (state.error) return <SearchSuffix failed />;
+    requestIdRef.current += 1;
+    runSearch({ searchQuery: debouncedSearchQuery }, requestIdRef.current);
+  }, [debouncedSearchQuery]);
+
+  if (loading) return <SearchLoadingPart />;
+  if (failed) return <SearchSuffix failed />;
   if (!results) return null;
 
   return (

src/utils/cache.ts

@@ -7,17 +7,23 @@ export class SimpleCache<Key, Value> {
 
   protected _storage: { key: Key; value: Value; expiry: Date }[] = [];
 
+  private static isExpired(entry: { expiry: Date }): boolean {
+    return entry.expiry.getTime() <= Date.now();
+  }
+
+  private pruneExpired(): void {
+    this._storage = this._storage.filter(
+      (entry) => !SimpleCache.isExpired(entry),
+    );
+  }
+
   /*
    ** initialize store, will start the interval
    */
   public initialize(): void {
     if (this._interval) throw new Error("cache is already initialized");
     this._interval = setInterval(() => {
-      const now = new Date();
-      this._storage.filter((val) => {
-        if (val.expiry < now) return false; // remove if expiry date is in the past
-        return true;
-      });
+      this.pruneExpired();
     }, this.INTERVAL_MS);
   }
 
@@ -26,6 +32,7 @@ export class SimpleCache<Key, Value> {
    */
   public destroy(): void {
     if (this._interval) clearInterval(this._interval);
+    this._interval = null;
     this.clear();
   }
 
@@ -48,10 +55,15 @@ export class SimpleCache<Key, Value> {
    */
   public get(key: Key): Value | undefined {
     if (!this._compare) throw new Error("Compare function not set");
+    this.pruneExpired();
     const foundValue = this._storage.find(
       (item) => this._compare && this._compare(item.key, key),
     );
     if (!foundValue) return undefined;
+    if (SimpleCache.isExpired(foundValue)) {
+      this.remove(key);
+      return undefined;
+    }
     return foundValue.value;
   }
 
@@ -60,6 +72,7 @@ export class SimpleCache<Key, Value> {
    */
   public set(key: Key, value: Value, expirySeconds: number): void {
     if (!this._compare) throw new Error("Compare function not set");
+    this.pruneExpired();
     const foundValue = this._storage.find(
       (item) => this._compare && this._compare(item.key, key),
     );
@@ -86,10 +99,9 @@ export class SimpleCache<Key, Value> {
    */
   public remove(key: Key): void {
     if (!this._compare) throw new Error("Compare function not set");
-    this._storage.filter((val) => {
-      if (this._compare && this._compare(val.key, key)) return false; // remove if compare is success
-      return true;
-    });
+    this._storage = this._storage.filter(
+      (val) => !(this._compare && this._compare(val.key, key)),
+    );
   }
 
   /*