mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-10 22:05:06 +01:00
new continue watching store
This commit is contained in:
parent
accc13ab0e
commit
aff39d1999
@ -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
|
||||
|
@ -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 {
|
||||
|
@ -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) {
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
);
|
||||
|
@ -15,7 +15,7 @@
|
||||
},
|
||||
"media": {
|
||||
"movie": "Movie",
|
||||
"series": "Series",
|
||||
"show": "Show",
|
||||
"stopEditing": "Stop editing",
|
||||
"errors": {
|
||||
"genericTitle": "Whoops, it broke!",
|
||||
|
@ -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
|
||||
);
|
||||
|
@ -22,6 +22,7 @@ export interface PlayerMeta {
|
||||
tmdbId: string;
|
||||
imdbId?: string;
|
||||
releaseYear: number;
|
||||
poster?: string;
|
||||
episode?: {
|
||||
number: number;
|
||||
tmdbId: string;
|
||||
|
@ -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
7
src/utils/mediaTypes.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export interface MediaItem {
|
||||
id: string;
|
||||
title: string;
|
||||
year: number;
|
||||
poster?: string;
|
||||
type: "show" | "movie";
|
||||
}
|
Loading…
Reference in New Issue
Block a user