new continue watching store

This commit is contained in:
mrjvs 2023-10-17 16:01:26 +02:00
parent accc13ab0e
commit aff39d1999
14 changed files with 130 additions and 148 deletions

View File

@ -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

View File

@ -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 {

View File

@ -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) {

View File

@ -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}
/>

View File

@ -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,
};

View File

@ -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>
);
}

View File

@ -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>

View File

@ -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>

View File

@ -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)
);

View File

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

View File

@ -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
);

View File

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

View File

@ -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") {

7
src/utils/mediaTypes.ts Normal file
View File

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