From 8de7f20ac9e31c5480a563cb501a516fd3704006 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 15 Jun 2025 15:48:26 +0200 Subject: [PATCH] wip: Add browse page --- front/app.config.ts | 3 +- .../mobile => }/app/(app)/(tabs)/_layout.tsx | 22 +------------ front/app/(app)/(tabs)/browse.tsx | 3 ++ front/app/(app)/{ => (tabs)}/index.tsx | 0 front/app/(app)/_layout.tsx | 6 ++-- front/apps/mobile/app/(app)/(tabs)/browse.tsx | 23 ------------- front/i18n-d.d.ts | 2 +- front/packages/ui/src/index.ts | 32 ------------------- front/packages/ui/src/svg.d.ts | 26 --------------- front/{packages/ui => }/src/i18n-d.d.ts | 2 +- front/src/query/query.tsx | 26 ++++++++------- .../ui/src => src/ui}/browse/grid.tsx | 22 +------------ .../ui/src => src/ui}/browse/header.tsx | 20 ------------ .../ui/src => src/ui}/browse/index.tsx | 29 +++-------------- .../ui/src => src/ui}/browse/list.tsx | 22 +------------ .../ui/src => src/ui}/browse/types.ts | 20 ------------ 16 files changed, 33 insertions(+), 225 deletions(-) rename front/{apps/mobile => }/app/(app)/(tabs)/_layout.tsx (55%) create mode 100644 front/app/(app)/(tabs)/browse.tsx rename front/app/(app)/{ => (tabs)}/index.tsx (100%) delete mode 100644 front/apps/mobile/app/(app)/(tabs)/browse.tsx delete mode 100644 front/packages/ui/src/index.ts delete mode 100644 front/packages/ui/src/svg.d.ts rename front/{packages/ui => }/src/i18n-d.d.ts (72%) rename front/{packages/ui/src => src/ui}/browse/grid.tsx (84%) rename front/{packages/ui/src => src/ui}/browse/header.tsx (84%) rename front/{packages/ui/src => src/ui}/browse/index.tsx (77%) rename front/{packages/ui/src => src/ui}/browse/list.tsx (81%) rename front/{packages/ui/src => src/ui}/browse/types.ts (60%) diff --git a/front/app.config.ts b/front/app.config.ts index f6088543..1fe88cd5 100644 --- a/front/app.config.ts +++ b/front/app.config.ts @@ -21,10 +21,11 @@ export const expo: ExpoConfig = { foregroundImage: "./public/icon-256x256.png", backgroundColor: "#eff1f5", }, + edgeToEdgeEnabled: true, }, web: { favicon: "./public/icon-256x256.png", - bundler: "metro" + bundler: "metro", }, updates: { url: "https://u.expo.dev/55de6b52-c649-4a15-9a45-569ff5ed036c", diff --git a/front/apps/mobile/app/(app)/(tabs)/_layout.tsx b/front/app/(app)/(tabs)/_layout.tsx similarity index 55% rename from front/apps/mobile/app/(app)/(tabs)/_layout.tsx rename to front/app/(app)/(tabs)/_layout.tsx index 9def31a3..3bf22117 100644 --- a/front/apps/mobile/app/(app)/(tabs)/_layout.tsx +++ b/front/app/(app)/(tabs)/_layout.tsx @@ -1,29 +1,9 @@ -/* - * 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 . - */ - -import { Icon } from "@kyoo/primitives"; import Browse from "@material-symbols/svg-400/rounded/browse-fill.svg"; import Downloading from "@material-symbols/svg-400/rounded/downloading-fill.svg"; import Home from "@material-symbols/svg-400/rounded/home-fill.svg"; import { Tabs } from "expo-router"; import { useTranslation } from "react-i18next"; +import { Icon } from "~/primitives"; export default function TabsLayout() { const { t } = useTranslation(); diff --git a/front/app/(app)/(tabs)/browse.tsx b/front/app/(app)/(tabs)/browse.tsx new file mode 100644 index 00000000..b832ae3a --- /dev/null +++ b/front/app/(app)/(tabs)/browse.tsx @@ -0,0 +1,3 @@ +import { BrowsePage } from "~/ui/browse"; + +export default BrowsePage; diff --git a/front/app/(app)/index.tsx b/front/app/(app)/(tabs)/index.tsx similarity index 100% rename from front/app/(app)/index.tsx rename to front/app/(app)/(tabs)/index.tsx diff --git a/front/app/(app)/_layout.tsx b/front/app/(app)/_layout.tsx index b6e9de90..7765c532 100644 --- a/front/app/(app)/_layout.tsx +++ b/front/app/(app)/_layout.tsx @@ -12,8 +12,10 @@ export default function Layout() { , headerRight: () => , contentStyle: { diff --git a/front/apps/mobile/app/(app)/(tabs)/browse.tsx b/front/apps/mobile/app/(app)/(tabs)/browse.tsx deleted file mode 100644 index a9cc8d79..00000000 --- a/front/apps/mobile/app/(app)/(tabs)/browse.tsx +++ /dev/null @@ -1,23 +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 . - */ - -import { BrowsePage } from "@kyoo/ui"; - -export default BrowsePage; diff --git a/front/i18n-d.d.ts b/front/i18n-d.d.ts index 3092f6ca..b9fe1223 100644 --- a/front/i18n-d.d.ts +++ b/front/i18n-d.d.ts @@ -1,5 +1,5 @@ import "i18next"; -import type en from "./public/translations/en.json"; +import type en from "../public/translations/en.json"; declare module "i18next" { interface CustomTypeOptions { diff --git a/front/packages/ui/src/index.ts b/front/packages/ui/src/index.ts deleted file mode 100644 index 6396229a..00000000 --- a/front/packages/ui/src/index.ts +++ /dev/null @@ -1,32 +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 . - */ - -export * from "../../../src/ui/navbar"; -export { HomePage } from "./home"; -export { BrowsePage } from "./browse"; -export { MovieDetails, ShowDetails } from "./details"; -export { CollectionPage } from "./collection"; -export { Player } from "./player"; -export { SearchPage } from "./search"; -export { ServerUrlPage, LoginPage, RegisterPage, OidcCallbackPage } from "../../../src/ui/login"; -export { DownloadPage, DownloadProvider } from "./downloads"; -export { SettingsPage } from "./settings"; -export { AdminPage } from "./admin"; -export * from "../../../src/ui/errors"; diff --git a/front/packages/ui/src/svg.d.ts b/front/packages/ui/src/svg.d.ts deleted file mode 100644 index 1ec3f0d9..00000000 --- a/front/packages/ui/src/svg.d.ts +++ /dev/null @@ -1,26 +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 . - */ - -declare module "*.svg" { - import type React from "react"; - import type { SvgProps } from "react-native-svg"; - const content: React.FC; - export default content; -} diff --git a/front/packages/ui/src/i18n-d.d.ts b/front/src/i18n-d.d.ts similarity index 72% rename from front/packages/ui/src/i18n-d.d.ts rename to front/src/i18n-d.d.ts index 3092f6ca..b9fe1223 100644 --- a/front/packages/ui/src/i18n-d.d.ts +++ b/front/src/i18n-d.d.ts @@ -1,5 +1,5 @@ import "i18next"; -import type en from "./public/translations/en.json"; +import type en from "../public/translations/en.json"; declare module "i18next" { interface CustomTypeOptions { diff --git a/front/src/query/query.tsx b/front/src/query/query.tsx index be18cc7e..dd56fb5d 100644 --- a/front/src/query/query.tsx +++ b/front/src/query/query.tsx @@ -106,13 +106,13 @@ export const createQueryClient = () => retry: false, }, mutations: { - mutationFn: (({ method, path, body, params }: MutationParam) => { - return queryFn({ - method, - path: toQueryKey({ path, params }), - body, - }); - }) as any, + // mutationFn: (({ method, path, body, params }: MutationParam) => { + // return queryFn({ + // method, + // url: keyToUrl(toQueryKey({ path, params })), + // body, + // }); + // }) as any, }, }, }); @@ -147,6 +147,10 @@ export const toQueryKey = (query: { ].filter((x) => x); }; +export const keyToUrl = (key: ReturnType) => { + return key.join("/").replace("/?", "?"); +}; + export const useFetch = (query: QueryIdentifier) => { const { apiUrl, authToken } = useContext(AccountContext); const key = toQueryKey({ apiUrl, path: query.path, params: query.params }); @@ -155,7 +159,7 @@ export const useFetch = (query: QueryIdentifier) => { queryKey: key, queryFn: (ctx) => queryFn({ - url: key.join("/").replace("/?", "?"), + url: keyToUrl(key), parser: query.parser, signal: ctx.signal, authToken: authToken?.access_token ?? null, @@ -174,7 +178,7 @@ export const useInfiniteFetch = (query: QueryIdentifier) = queryKey: key, queryFn: (ctx) => queryFn({ - url: (ctx.pageParam as string) ?? key.join("/").replace("/?", "?"), + url: (ctx.pageParam as string) ?? keyToUrl(key), parser: Paged(query.parser), signal: ctx.signal, authToken: authToken?.access_token ?? null, @@ -214,7 +218,7 @@ export const prefetch = async (...queries: QueryIdentifier[]) => { queryKey: key, queryFn: (ctx) => queryFn({ - url: key.join("/").replace("/?", "?"), + url: keyToUrl(key), parser: Paged(query.parser), signal: ctx.signal, authToken: authToken?.access_token ?? null, @@ -227,7 +231,7 @@ export const prefetch = async (...queries: QueryIdentifier[]) => { queryKey: key, queryFn: (ctx) => queryFn({ - url: key.join("/").replace("/?", "?"), + url: keyToUrl(key), parser: query.parser, signal: ctx.signal, authToken: authToken?.access_token ?? null, diff --git a/front/packages/ui/src/browse/grid.tsx b/front/src/ui/browse/grid.tsx similarity index 84% rename from front/packages/ui/src/browse/grid.tsx rename to front/src/ui/browse/grid.tsx index e10b6e18..f0259f30 100644 --- a/front/packages/ui/src/browse/grid.tsx +++ b/front/src/ui/browse/grid.tsx @@ -1,23 +1,3 @@ -/* - * 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 . - */ - import { type KyooImage, WatchStatusV } from "@kyoo/models"; import { Icon, @@ -35,7 +15,7 @@ import Done from "@material-symbols/svg-400/rounded/check-fill.svg"; import { useState } from "react"; import { type ImageStyle, Platform, View } from "react-native"; import { type Stylable, type Theme, max, percent, px, rem, useYoshiki } from "yoshiki/native"; -import { ItemContext } from "../components/context-menus"; +import { ItemContext } from "../../../packages/ui/src/components/context-menus"; import type { Layout } from "../fetch"; export const ItemWatchStatus = ({ diff --git a/front/packages/ui/src/browse/header.tsx b/front/src/ui/browse/header.tsx similarity index 84% rename from front/packages/ui/src/browse/header.tsx rename to front/src/ui/browse/header.tsx index 462b52e4..a39f2cb0 100644 --- a/front/packages/ui/src/browse/header.tsx +++ b/front/src/ui/browse/header.tsx @@ -1,23 +1,3 @@ -/* - * 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 . - */ - import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives"; import ArrowDownward from "@material-symbols/svg-400/rounded/arrow_downward.svg"; import ArrowUpward from "@material-symbols/svg-400/rounded/arrow_upward.svg"; diff --git a/front/packages/ui/src/browse/index.tsx b/front/src/ui/browse/index.tsx similarity index 77% rename from front/packages/ui/src/browse/index.tsx rename to front/src/ui/browse/index.tsx index bbc115a5..00ba0ca9 100644 --- a/front/packages/ui/src/browse/index.tsx +++ b/front/src/ui/browse/index.tsx @@ -1,34 +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 . - */ - +import { type ComponentProps, useState } from "react"; import { type LibraryItem, LibraryItemP, type QueryIdentifier, type QueryPage, getDisplayDate, -} from "@kyoo/models"; -import { type ComponentProps, useState } from "react"; -import { createParam } from "solito"; -import { InfiniteFetch } from "../fetch-infinite"; -import { DefaultLayout } from "../layout"; +} from "~/models"; +import { InfiniteFetch } from "../../query/fetch-infinite" +import { DefaultLayout } from "../../../packages/ui/src/layout"; import { ItemGrid } from "./grid"; import { BrowseSettings } from "./header"; import { ItemList } from "./list"; diff --git a/front/packages/ui/src/browse/list.tsx b/front/src/ui/browse/list.tsx similarity index 81% rename from front/packages/ui/src/browse/list.tsx rename to front/src/ui/browse/list.tsx index 00570e7f..217d3930 100644 --- a/front/packages/ui/src/browse/list.tsx +++ b/front/src/ui/browse/list.tsx @@ -1,23 +1,3 @@ -/* - * 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 . - */ - import type { KyooImage, WatchStatusV } from "@kyoo/models"; import { GradientImageBackground, @@ -34,7 +14,7 @@ import { import { useState } from "react"; import { Platform, View } from "react-native"; import { percent, px, rem, useYoshiki } from "yoshiki/native"; -import { ItemContext } from "../components/context-menus"; +import { ItemContext } from "../../../packages/ui/src/components/context-menus"; import type { Layout } from "../fetch"; import { ItemWatchStatus } from "./grid"; diff --git a/front/packages/ui/src/browse/types.ts b/front/src/ui/browse/types.ts similarity index 60% rename from front/packages/ui/src/browse/types.ts rename to front/src/ui/browse/types.ts index c914ab26..81888723 100644 --- a/front/packages/ui/src/browse/types.ts +++ b/front/src/ui/browse/types.ts @@ -1,23 +1,3 @@ -/* - * 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 . - */ - import Collection from "@material-symbols/svg-400/rounded/collections_bookmark.svg"; import Movie from "@material-symbols/svg-400/rounded/movie.svg"; import TV from "@material-symbols/svg-400/rounded/tv.svg";