new continue watching store

src/backend/metadata/search.ts

@@ -1,22 +1,27 @@
 import { SimpleCache } from "@/utils/cache";
+import { MediaItem } from "@/utils/mediaTypes";
 
-import { formatTMDBMeta, formatTMDBSearchResult, multiSearch } from "./tmdb";
-import { MWMediaMeta, MWQuery } from "./types/mw";
+import {
+  formatTMDBMetaToMediaItem,
+  formatTMDBSearchResult,
+  multiSearch,
+} from "./tmdb";
+import { MWQuery } from "./types/mw";
 
-const cache = new SimpleCache<MWQuery, MWMediaMeta[]>();
+const cache = new SimpleCache<MWQuery, MediaItem[]>();
 cache.setCompare((a, b) => {
   return a.searchQuery.trim() === b.searchQuery.trim();
 });
 cache.initialize();
 
-export async function searchForMedia(query: MWQuery): Promise<MWMediaMeta[]> {
-  if (cache.has(query)) return cache.get(query) as MWMediaMeta[];
+export async function searchForMedia(query: MWQuery): Promise<MediaItem[]> {
+  if (cache.has(query)) return cache.get(query) as MediaItem[];
   const { searchQuery } = query;
 
   const data = await multiSearch(searchQuery);
   const results = data.map((v) => {
     const formattedResult = formatTMDBSearchResult(v, v.media_type);
-    return formatTMDBMeta(formattedResult);
+    return formatTMDBMetaToMediaItem(formattedResult);
   });
 
   cache.set(query, results, 3600); // cache results for 1 hour

src/backend/metadata/tmdb.ts

@@ -1,6 +1,7 @@
 import slugify from "slugify";
 
 import { conf } from "@/setup/config";
+import { MediaItem } from "@/utils/mediaTypes";
 
 import { MWMediaMeta, MWMediaType, MWSeasonMeta } from "./types/mw";
 import {
@@ -24,12 +25,26 @@ export function mediaTypeToTMDB(type: MWMediaType): TMDBContentTypes {
   throw new Error("unsupported type");
 }
 
+export function mediaItemTypeToMediaType(type: MediaItem["type"]): MWMediaType {
+  if (type === "movie") return MWMediaType.MOVIE;
+  if (type === "show") return MWMediaType.SERIES;
+  throw new Error("unsupported type");
+}
+
 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
@@ -72,6 +87,18 @@ export function formatTMDBMeta(
   };
 }
 
+export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
+  const type = TMDBMediaToMediaItemType(media.object_type);
+
+  return {
+    title: media.title,
+    id: media.id.toString(),
+    year: media.original_release_year ?? 0,
+    poster: media.poster,
+    type,
+  };
+}
+
 export function TMDBIdToUrlId(
   type: MWMediaType,
   tmdbId: string,
@@ -89,6 +116,14 @@ 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 {

src/components/media/MediaCard.tsx

@@ -2,16 +2,16 @@ import c from "classnames";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-import { TMDBMediaToId } from "@/backend/metadata/tmdb";
-import { MWMediaMeta } from "@/backend/metadata/types/mw";
+import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
+import { MediaItem } from "@/utils/mediaTypes";
 
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
 
 export interface MediaCardProps {
-  media: MWMediaMeta;
+  media: MediaItem;
   linkable?: boolean;
   series?: {
     episode: number;
@@ -38,7 +38,7 @@ function MediaCardContent({
   const canLink = linkable && !closable;
 
   const dotListContent = [t(`media.${media.type}`)];
-  if (media.year) dotListContent.push(media.year);
+  if (media.year) dotListContent.push(media.year.toFixed());
 
   return (
     <Flare.Base
@@ -141,7 +141,7 @@ export function MediaCard(props: MediaCardProps) {
   const canLink = props.linkable && !props.closable;
 
   let link = canLink
-    ? `/media/${encodeURIComponent(TMDBMediaToId(props.media))}`
+    ? `/media/${encodeURIComponent(mediaItemToId(props.media))}`
     : "#";
   if (canLink && props.series) {
     if (props.series.season === 0 && !props.series.episodeId) {

src/components/media/WatchedMediaCard.tsx

@@ -1,44 +1,49 @@
 import { useMemo } from "react";
 
-import { MWMediaMeta } from "@/backend/metadata/types/mw";
-import { useWatchedContext } from "@/state/watched";
+import { ProgressMediaItem, useProgressStore } from "@/stores/progress";
+import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaCard } from "./MediaCard";
 
 export interface WatchedMediaCardProps {
-  media: MWMediaMeta;
+  media: MediaItem;
   closable?: boolean;
   onClose?: () => void;
 }
 
-function formatSeries(
-  obj:
-    | { episodeId: string; seasonId: string; episode: number; season: number }
-    | undefined
-) {
+function formatSeries(obj: ProgressMediaItem | undefined) {
   if (!obj) return undefined;
+  if (obj.type !== "show") return;
+  // TODO only show latest episode watched
+  const ep = Object.values(obj.episodes)[0];
+  const season = obj.seasons[ep?.seasonId];
+  if (!ep || !season) return;
   return {
-    season: obj.season,
-    episode: obj.episode,
-    episodeId: obj.episodeId,
-    seasonId: obj.seasonId,
+    season: season.number,
+    episode: ep.number,
+    episodeId: ep.id,
+    seasonId: ep.seasonId,
+    progress: ep.progress,
   };
 }
 
 export function WatchedMediaCard(props: WatchedMediaCardProps) {
-  const { watched } = useWatchedContext();
-  const watchedMedia = useMemo(() => {
-    return watched.items
-      .sort((a, b) => b.watchedAt - a.watchedAt)
-      .find((v) => v.item.meta.id === props.media.id);
-  }, [watched, props.media]);
+  const progressItems = useProgressStore((s) => s.items);
+  const item = useMemo(() => {
+    return progressItems[props.media.id];
+  }, [progressItems, props.media]);
+  const series = useMemo(() => formatSeries(item), [item]);
+  const progress = item?.progress ?? series?.progress;
+  const percentage = progress
+    ? (progress.watched / progress.duration) * 100
+    : undefined;
 
   return (
     <MediaCard
       media={props.media}
-      series={formatSeries(watchedMedia?.item?.series)}
+      series={series}
       linkable
-      percentage={watchedMedia?.percentage}
+      percentage={percentage}
       onClose={props.onClose}
       closable={props.closable}
     />

src/components/player/hooks/usePlayerMeta.ts

@@ -23,6 +23,7 @@ export function usePlayerMeta() {
           type: "show",
           releaseYear: +(m.meta.year ?? 0),
           title: m.meta.title,
+          poster: m.meta.poster,
           tmdbId: m.tmdbId ?? "",
           imdbId: m.imdbId,
           episode: {
@@ -41,6 +42,7 @@ export function usePlayerMeta() {
           type: "movie",
           releaseYear: +(m.meta.year ?? 0),
           title: m.meta.title,
+          poster: m.meta.poster,
           tmdbId: m.tmdbId ?? "",
           imdbId: m.imdbId,
         };

src/pages/SearchPage.tsx

@@ -1,88 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import { searchForMedia } from "@/backend/metadata/search";
-import { MWMediaMeta, MWQuery } from "@/backend/metadata/types/mw";
-import { IconPatch } from "@/components/buttons/IconPatch";
-import { Icons } from "@/components/Icon";
-import { SectionHeading } from "@/components/layout/SectionHeading";
-import { MediaGrid } from "@/components/media/MediaGrid";
-import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
-import { useLoading } from "@/hooks/useLoading";
-import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
-
-function SearchSuffix(props: { failed?: boolean; results?: number }) {
-  const { t } = useTranslation();
-
-  const icon: Icons = props.failed ? Icons.WARNING : Icons.EYE_SLASH;
-
-  return (
-    <div className="mb-24 mt-40  flex flex-col items-center justify-center space-y-3 text-center">
-      <IconPatch
-        icon={icon}
-        className={`text-xl ${props.failed ? "text-red-400" : "text-bink-600"}`}
-      />
-
-      {/* standard suffix */}
-      {!props.failed ? (
-        <div>
-          {(props.results ?? 0) > 0 ? (
-            <p>{t("search.allResults")}</p>
-          ) : (
-            <p>{t("search.noResults")}</p>
-          )}
-        </div>
-      ) : null}
-
-      {/* Error result */}
-      {props.failed ? (
-        <div>
-          <p>{t("search.allFailed")}</p>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
-  const { t } = useTranslation();
-
-  const [results, setResults] = useState<MWMediaMeta[]>([]);
-  const [runSearchQuery, loading, error] = useLoading((query: MWQuery) =>
-    searchForMedia(query)
-  );
-
-  useEffect(() => {
-    async function runSearch(query: MWQuery) {
-      const searchResults = await runSearchQuery(query);
-      if (!searchResults) return;
-      setResults(searchResults);
-    }
-
-    if (searchQuery.searchQuery !== "") runSearch(searchQuery);
-  }, [searchQuery, runSearchQuery]);
-
-  if (loading) return <SearchLoadingPart />;
-  if (error) return <SearchSuffix failed />;
-  if (!results) return null;
-
-  return (
-    <div>
-      {results.length > 0 ? (
-        <div>
-          <SectionHeading
-            title={t("search.headingTitle") || "Search results"}
-            icon={Icons.SEARCH}
-          />
-          <MediaGrid>
-            {results.map((v) => (
-              <WatchedMediaCard key={v.id.toString()} media={v} />
-            ))}
-          </MediaGrid>
-        </div>
-      ) : null}
-
-      <SearchSuffix results={results.length} />
-    </div>
-  );
-}

src/pages/parts/home/BookmarksPart.tsx

@@ -45,12 +45,13 @@ export function BookmarksPart() {
       </SectionHeading>
       <MediaGrid ref={gridRef}>
         {bookmarksSorted.map((v) => (
-          <WatchedMediaCard
-            key={v.id}
-            media={v}
-            closable={editing}
-            onClose={() => setItemBookmark(v, false)}
-          />
+          <div key={v.id}>Bookmark</div>
+          // <WatchedMediaCard
+          //   key={v.id}
+          //   media={v}
+          //   closable={editing}
+          //   onClose={() => setItemBookmark(v, false)}
+          // />
         ))}
       </MediaGrid>
     </div>

src/pages/parts/home/WatchingPart.tsx

@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
@@ -7,25 +7,29 @@ import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
-import {
-  getIfBookmarkedFromPortable,
-  useBookmarkContext,
-} from "@/state/bookmark";
-import { useWatchedContext } from "@/state/watched";
+import { useProgressStore } from "@/stores/progress";
+import { MediaItem } from "@/utils/mediaTypes";
 
 export function WatchingPart() {
   const { t } = useTranslation();
-  const { getFilteredBookmarks } = useBookmarkContext();
-  const { getFilteredWatched, removeProgress } = useWatchedContext();
+  const progressItems = useProgressStore((s) => s.items);
+  const removeItem = useProgressStore((s) => s.removeItem);
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
 
-  const bookmarks = getFilteredBookmarks();
-  const watchedItems = getFilteredWatched().filter(
-    (v) => !getIfBookmarkedFromPortable(bookmarks, v.item.meta)
-  );
+  const sortedProgressItems = useMemo(() => {
+    const output: MediaItem[] = [];
+    Object.entries(progressItems).forEach((entry) => {
+      output.push({
+        id: entry[0],
+        ...entry[1],
+      });
+    });
+    // TODO sort on last modified date
+    return output;
+  }, [progressItems]);
 
-  if (watchedItems.length === 0) return null;
+  if (sortedProgressItems.length === 0) return null;
 
   return (
     <div>
@@ -36,12 +40,12 @@ export function WatchingPart() {
         <EditButton editing={editing} onEdit={setEditing} />
       </SectionHeading>
       <MediaGrid ref={gridRef}>
-        {watchedItems.map((v) => (
+        {sortedProgressItems.map((v) => (
           <WatchedMediaCard
-            key={v.item.meta.id}
-            media={v.item.meta}
+            key={v.id}
+            media={v}
             closable={editing}
-            onClose={() => removeProgress(v.item.meta.id)}
+            onClose={() => removeItem(v.id)}
           />
         ))}
       </MediaGrid>

src/pages/parts/search/SearchListPart.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { searchForMedia } from "@/backend/metadata/search";
-import { MWMediaMeta, MWQuery } from "@/backend/metadata/types/mw";
+import { MWQuery } from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
@@ -10,6 +10,7 @@ import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
 import { useLoading } from "@/hooks/useLoading";
 import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
+import { MediaItem } from "@/utils/mediaTypes";
 
 function SearchSuffix(props: { failed?: boolean; results?: number }) {
   const { t } = useTranslation();
@@ -47,7 +48,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
 export function SearchListPart({ searchQuery }: { searchQuery: string }) {
   const { t } = useTranslation();
 
-  const [results, setResults] = useState<MWMediaMeta[]>([]);
+  const [results, setResults] = useState<MediaItem[]>([]);
   const [runSearchQuery, loading, error] = useLoading((query: MWQuery) =>
     searchForMedia(query)
   );

src/setup/locales/en/translation.json

@@ -15,7 +15,7 @@
   },
   "media": {
     "movie": "Movie",
-    "series": "Series",
+    "show": "Show",
     "stopEditing": "Stop editing",
     "errors": {
       "genericTitle": "Whoops, it broke!",

src/state/watched/migrations/v2.ts

@@ -1,5 +1,6 @@
 import { DetailedMeta, getMetaFromId } from "@/backend/metadata/getmeta";
 import { searchForMedia } from "@/backend/metadata/search";
+import { mediaItemTypeToMediaType } from "@/backend/metadata/tmdb";
 import { MWMediaMeta, MWMediaType } from "@/backend/metadata/types/mw";
 import { compareTitle } from "@/utils/titleMatch";
 
@@ -69,8 +70,8 @@ async function getMetas(
     if (!item) continue;
 
     let keys: (string | null)[][] = [["0", "0"]];
-    if (item.data.type === "series") {
-      const meta = await getMetaFromId(item.data.type, item.data.id);
+    if (item.data.type === "show") {
+      const meta = await getMetaFromId(MWMediaType.SERIES, item.data.id);
       if (!meta || !meta?.meta.seasons) return;
       const seasonNumbers = [
         ...new Set(
@@ -95,7 +96,7 @@ async function getMetas(
       keys.map(async ([key, id]) => {
         if (!key) return;
         mediaMetas[item.id][key] = await getMetaFromId(
-          item.data.type,
+          mediaItemTypeToMediaType(item.data.type),
           item.data.id,
           id === "0" || id === null ? undefined : id
         );

src/stores/player/slices/source.ts

@@ -22,6 +22,7 @@ export interface PlayerMeta {
   tmdbId: string;
   imdbId?: string;
   releaseYear: number;
+  poster?: string;
   episode?: {
     number: number;
     tmdbId: string;

src/stores/progress/index.ts

@@ -26,6 +26,7 @@ export interface ProgressEpisodeItem {
 export interface ProgressMediaItem {
   title: string;
   year: number;
+  poster?: string;
   type: "show" | "movie";
   progress?: ProgressItem;
   seasons: Record<string, ProgressSeasonItem>;
@@ -40,6 +41,7 @@ export interface UpdateItemOptions {
 export interface ProgressStore {
   items: Record<string, ProgressMediaItem>;
   updateItem(ops: UpdateItemOptions): void;
+  removeItem(id: string): void;
 }
 
 // TODO add migration from previous progress store
@@ -47,6 +49,11 @@ export const useProgressStore = create(
   persist(
     immer<ProgressStore>((set) => ({
       items: {},
+      removeItem(id) {
+        set((s) => {
+          delete s.items[id];
+        });
+      },
       updateItem({ meta, progress }) {
         set((s) => {
           if (!s.items[meta.tmdbId])
@@ -56,6 +63,7 @@ export const useProgressStore = create(
               seasons: {},
               title: meta.title,
               year: meta.releaseYear,
+              poster: meta.poster,
             };
           const item = s.items[meta.tmdbId];
           if (meta.type === "movie") {

src/utils/mediaTypes.ts

@@ -0,0 +1,7 @@
+export interface MediaItem {
+  id: string;
+  title: string;
+  year: number;
+  poster?: string;
+  type: "show" | "movie";
+}