Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-08 10:44:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Zoe Roux 2025-06-19 09:17:33 +02:00
parent 3a9cb262f8
commit 43cf343841
No known key found for this signature in database
6 changed files with 40 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
front/packages/models/src/utils.ts
View File

@ -26,25 +26,6 @@ import type { Movie, Show } from "./resources";
export const zdate = z.coerce.date;
export const getDisplayDate = (data: Show | Movie) => {
const {
startAir,
endAir,
airDate,
}: { startAir?: Date | null; endAir?: Date | null; airDate?: Date | null } = data;
if (startAir) {
if (!endAir || startAir.getFullYear() === endAir.getFullYear()) {
return startAir.getFullYear().toString();
}
return startAir.getFullYear() + (endAir ? ` - ${endAir.getFullYear()}` : "");
}
if (airDate) {
return airDate.getFullYear().toString();
}
return null;
};
export const useLocalSetting = (setting: string, def: string) => {
if (Platform.OS === "web" && typeof window === "undefined") return [def, null!] as const;
// eslint-disable-next-line react-hooks/rules-of-hooks

163
front/packages/ui/src/components/context-menus.tsx
View File

@ -1,163 +0,0 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { WatchStatusV, queryFn, useAccount } from "@kyoo/models";
import { HR, IconButton, Menu, tooltip, usePopup } from "@kyoo/primitives";
import Refresh from "@material-symbols/svg-400/rounded/autorenew.svg";
import Download from "@material-symbols/svg-400/rounded/download.svg";
import Info from "@material-symbols/svg-400/rounded/info.svg";
import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import { Platform } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { useDownloader } from "../downloads";
import { MediaInfoPopup } from "./media-info";
import { watchListIcon } from "./watchlist-info";
export const EpisodesContext = ({
type = "episode",
slug,
showSlug,
status,
force,
...props
}: {
type?: "show" | "movie" | "episode";
showSlug?: string | null;
slug: string;
status: WatchStatusV | null;
force?: boolean;
} & Partial<ComponentProps<typeof Menu<typeof IconButton>>>) => {
const account = useAccount();
const downloader = useDownloader();
const { css } = useYoshiki();
const { t } = useTranslation();
const [setPopup, close] = usePopup();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (newStatus: WatchStatusV | null) =>
queryFn({
path: [type, slug, "watchStatus", newStatus && `?status=${newStatus}`],
method: newStatus ? "POST" : "DELETE",
}),
onSettled: async () => await queryClient.invalidateQueries({ queryKey: [type, slug] }),
});
const metadataRefreshMutation = useMutation({
mutationFn: () =>
queryFn({
path: [type, slug, "refresh"],
method: "POST",
}),
});
return (
<>
<Menu
Trigger={IconButton}
icon={MoreVert}
{...tooltip(t("misc.more"))}
{...(css([Platform.OS !== "web" && !force && { display: "none" }], props) as any)}
>
{showSlug && (
<Menu.Item
label={t("home.episodeMore.goToShow")}
icon={Info}
href={`/show/${showSlug}`}
/>
)}
<Menu.Sub
label={account ? t("show.watchlistEdit") : t("show.watchlistLogin")}
disabled={!account}
icon={watchListIcon(status)}
>
{Object.values(WatchStatusV).map((x) => (
<Menu.Item
key={x}
label={t(`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`)}
onSelect={() => mutation.mutate(x)}
selected={x === status}
/>
))}
{status !== null && (
<Menu.Item
label={t("show.watchlistMark.null")}
onSelect={() => mutation.mutate(null)}
/>
)}
</Menu.Sub>
{type !== "show" && (
<>
<Menu.Item
label={t("home.episodeMore.download")}
icon={Download}
onSelect={() => downloader(type, slug)}
/>
<Menu.Item
label={t("home.episodeMore.mediainfo")}
icon={MovieInfo}
onSelect={() =>
setPopup(<MediaInfoPopup mediaType={type} mediaSlug={slug} close={close} />)
}
/>
</>
)}
{account?.isAdmin === true && (
<>
<HR />
<Menu.Item
label={t("home.refreshMetadata")}
icon={Refresh}
onSelect={() => metadataRefreshMutation.mutate()}
/>
</>
)}
</Menu>
</>
);
};
export const ItemContext = ({
type,
slug,
status,
force,
...props
}: {
type: "movie" | "show";
slug: string;
status: WatchStatusV | null;
force?: boolean;
} & Partial<ComponentProps<typeof Menu<typeof IconButton>>>) => {
return (
<EpisodesContext
type={type}
slug={slug}
status={status}
showSlug={null}
force={force}
{...props}
/>
);
};

46
front/packages/ui/src/components/watchlist-info.tsx → front/src/components/watchlist-info.tsx
View File

@ -1,32 +1,13 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { WatchStatusV, queryFn, useAccount } from "@kyoo/models";
import { IconButton, Menu, tooltip } from "@kyoo/primitives";
import Bookmark from "@material-symbols/svg-400/rounded/bookmark-fill.svg";
import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
import BookmarkAdded from "@material-symbols/svg-400/rounded/bookmark_added-fill.svg";
import BookmarkRemove from "@material-symbols/svg-400/rounded/bookmark_remove.svg";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import { WatchStatusV } from "~/models";
import { IconButton, Menu, tooltip } from "~/primitives";
import { useAccount } from "~/providers/account-context";
import { useMutation } from "~/query";
export const watchListIcon = (status: WatchStatusV | null) => {
switch (status) {
@ -55,14 +36,13 @@ export const WatchListInfo = ({
const account = useAccount();
const { t } = useTranslation();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (newStatus: WatchStatusV | null) =>
queryFn({
path: [type, slug, "watchStatus", newStatus && `?status=${newStatus}`],
method: newStatus ? "POST" : "DELETE",
}),
onSettled: async () => await queryClient.invalidateQueries({ queryKey: [type, slug] }),
path: [type, slug, "watchStatus"],
compute: (newStatus: WatchStatusV | null) => ({
method: newStatus ? "POST" : "DELETE",
params: newStatus ? { status: newStatus } : undefined,
}),
invalidate: [type, slug],
});
if (mutation.isPending) status = mutation.variables;
@ -112,5 +92,11 @@ export const WatchListInfo = ({
<Menu.Item label={t("show.watchlistMark.null")} onSelect={() => mutation.mutate(null)} />
</Menu>
);
default:
return exhaustiveCheck(status);
}
};
function exhaustiveCheck(v: never): never {
return v;
}

14
front/src/ui/browse/index.tsx
View File

@ -1,17 +1,11 @@
import { type ComponentProps, useState } from "react";
import {
type LibraryItem,
LibraryItemP,
type QueryIdentifier,
type QueryPage,
getDisplayDate,
} from "~/models";
import { ItemGrid } from "~/components";
import { type LibraryItem, LibraryItemP, getDisplayDate } from "~/models";
import { InfiniteFetch, type QueryIdentifier, type QueryPage } from "~/query";
import { useQueryState } from "~/utils";
import { DefaultLayout } from "../../../packages/ui/src/layout";
import { InfiniteFetch } from "../../query/fetch-infinite";
import { ItemGrid } from "~/components";
import { BrowseSettings } from "./header";
import { ItemList } from "../../components/item-list";
import { BrowseSettings } from "./header";
import {
Layout,
type MediaType,

20
front/src/utils.ts
View File

@ -16,3 +16,23 @@ export const useQueryState = <S>(key: string, initial: S) => {
};
return [state, update] as const;
};
export const getDisplayDate = (data: Show | Movie) => {
const {
startAir,
endAir,
airDate,
}: { startAir?: Date | null; endAir?: Date | null; airDate?: Date | null } = data;
if (startAir) {
if (!endAir || startAir.getFullYear() === endAir.getFullYear()) {
return startAir.getFullYear().toString();
}
return startAir.getFullYear() + (endAir ? ` - ${endAir.getFullYear()}` : "");
}
if (airDate) {
return airDate.getFullYear().toString();
}
return null;
};

1
front/tsconfig.json
View File

@ -19,7 +19,6 @@
"types": [
"node",
"react",
"vite/client"
],
"lib": [
"dom",