diff --git a/front/apps/web/babel.config.js b/front/apps/web/babel.config.js deleted file mode 100644 index 407a0c0c..00000000 --- a/front/apps/web/babel.config.js +++ /dev/null @@ -1,27 +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 . - */ - -module.exports = function (api) { - api.cache(true); - return { - presets: ["babel-preset-expo"], - plugins: ["react-native-reanimated/plugin"], - }; -}; diff --git a/front/apps/web/next.config.js b/front/apps/web/next.config.js index 14591000..75d48866 100755 --- a/front/apps/web/next.config.js +++ b/front/apps/web/next.config.js @@ -28,8 +28,6 @@ const suboctopus = path.dirname(require.resolve("libass-wasm")); * @type {import("next").NextConfig} */ const nextConfig = { - // FIXME: https://github.com/nandorojo/moti/issues/224 - reactStrictMode: false, swcMinify: true, output: "standalone", webpack: (config) => { @@ -96,28 +94,27 @@ const nextConfig = { locales: ["en", "fr"], defaultLocale: "en", }, + transpilePackages: [ + "@kyoo/ui", + "@kyoo/primitives", + "@kyoo/models", + "solito", + "react-native", + "react-native-web", + "react-native-svg", + "react-native-reanimated", + "moti", + "yoshiki", + "@expo/vector-icons", + "@expo/html-elements", + "expo-font", + "expo-asset", + "expo-av", + "expo-modules-core", + "expo-linear-gradient", + ], experimental: { - forceSwcTransforms: true, outputFileTracingRoot: path.join(__dirname, "../../"), - transpilePackages: [ - "@kyoo/ui", - "@kyoo/primitives", - "@kyoo/models", - "solito", - "react-native", - "react-native-web", - "react-native-svg", - "react-native-reanimated", - "moti", - "yoshiki", - "@expo/vector-icons", - "@expo/html-elements", - "expo-font", - "expo-asset", - "expo-av", - "expo-modules-core", - "expo-linear-gradient", - ], }, }; diff --git a/front/apps/web/package.json b/front/apps/web/package.json index b55c96f2..1a1ae44f 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -15,7 +15,6 @@ "@kyoo/primitives": "workspace:^", "@kyoo/ui": "workspace:^", "@material-symbols/svg-400": "^0.5.0", - "@next/font": "13.2.4", "@radix-ui/react-dropdown-menu": "^2.0.4", "@tanstack/react-query": "^4.26.1", "expo-linear-gradient": "^12.1.2", diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index 5d6fd1af..10b1c6e9 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/front/apps/web/src/pages/_app.tsx @@ -26,7 +26,7 @@ import { createQueryClient, fetchQuery, getTokenWJ, QueryIdentifier, QueryPage } import { setSecureItemSync } from "@kyoo/models/src/secure-store.web"; import { useState } from "react"; import NextApp, { AppContext, type AppProps } from "next/app"; -import { Poppins } from "@next/font/google"; +import { Poppins } from "next/font/google"; import { useTheme, useMobileHover, useStyleRegistry, StyleRegistryProvider } from "yoshiki/web"; import superjson from "superjson"; import Head from "next/head"; diff --git a/front/apps/web/src/polyfill.ts b/front/apps/web/src/polyfill.ts index bcd25cf7..a1b77565 100644 --- a/front/apps/web/src/polyfill.ts +++ b/front/apps/web/src/polyfill.ts @@ -18,14 +18,16 @@ * along with Kyoo. If not, see . */ -import "raf/polyfill"; +// import "raf/polyfill"; +// import "setimmediate"; +// import "react-native-reanimated"; import React from "react"; -// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355 -if (typeof window !== "undefined") { - // @ts-ignore - window._frameTimestamp = null; -} +// // FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355 +// if (typeof window !== "undefined") { +// // @ts-ignore +// window._frameTimestamp = null; +// } // Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details) if (typeof window === "undefined") { React.useLayoutEffect = React.useEffect; diff --git a/front/packages/primitives/src/animated.tsx b/front/packages/primitives/src/animated.tsx deleted file mode 100644 index a86c3cf9..00000000 --- a/front/packages/primitives/src/animated.tsx +++ /dev/null @@ -1,47 +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 { motify } from "moti"; -import { Component, ComponentType, FunctionComponent } from "react"; -import { Poster } from "./image"; - -const getDisplayName = (Cmp: ComponentType) => { - return Cmp.displayName || Cmp.name || "Component"; -}; - -const asClass = (Cmp: FunctionComponent) => { - // TODO: ensure that every props is given at least once. - return class AsClass extends Component & { forward?: Partial }> { - static displayName = `WithClass(${getDisplayName(Cmp)})`; - - constructor(props: Partial & { forward?: Partial }) { - super(props); - } - - render() { - // @ts-ignore See todo above - return ; - } - }; -}; - -export const Animated = { - Poster: motify(asClass(Poster))(), -}; diff --git a/front/packages/primitives/src/index.ts b/front/packages/primitives/src/index.ts index b665fcc8..20e551ce 100644 --- a/front/packages/primitives/src/index.ts +++ b/front/packages/primitives/src/index.ts @@ -36,5 +36,4 @@ export * from "./input"; export * from "./button"; export * from "./chip"; -export * from "./animated"; export * from "./utils"; diff --git a/front/packages/primitives/src/skeleton.web.tsx b/front/packages/primitives/src/skeleton.web.tsx new file mode 100644 index 00000000..8e6771ca --- /dev/null +++ b/front/packages/primitives/src/skeleton.web.tsx @@ -0,0 +1,149 @@ +/* + * 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 { LinearGradient } from "expo-linear-gradient"; +import { useState } from "react"; +import { View, ViewProps } from "react-native"; +import { px, rem, useYoshiki, percent, em } from "yoshiki/native"; +import { hiddenIfNoJs } from "./utils/nojs"; + +export const SkeletonCss = () => ( + +); + +export const Skeleton = ({ + children, + show: forcedShow, + lines = 1, + variant = "text", + ...props +}: Omit & { + children?: JSX.Element | JSX.Element[] | boolean | null; + show?: boolean; + lines?: number; + variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext"; +}) => { + const { css, theme } = useYoshiki(); + const [width, setWidth] = useState(undefined); + const perc = (v: number) => (v / 100) * width!; + + if (forcedShow === undefined && children && children !== true) return <>{children}; + + return ( + + {children} + {(forcedShow || !children || children === true) && + [...Array(lines)].map((_, i) => ( + setWidth(e.nativeEvent.layout.width)} + {...css( + [ + { + bg: (theme) => theme.overlay0, + }, + lines === 1 && { + position: "absolute", + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + lines !== 1 && { + width: i === lines - 1 ? percent(40) : percent(100), + height: rem(1.2), + marginBottom: rem(0.5), + overflow: "hidden", + borderRadius: px(6), + }, + ], + hiddenIfNoJs, + )} + > + + + ))} + + ); +}; diff --git a/front/packages/ui/src/browse/list.tsx b/front/packages/ui/src/browse/list.tsx index ddf7962a..4102c325 100644 --- a/front/packages/ui/src/browse/list.tsx +++ b/front/packages/ui/src/browse/list.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { Link, P, Skeleton, Animated, ts, ImageBackground, Heading } from "@kyoo/primitives"; +import { Link, P, Skeleton, ts, ImageBackground, Poster, Heading } from "@kyoo/primitives"; import { useState } from "react"; import { View } from "react-native"; import { percent, px, rem, useYoshiki } from "yoshiki/native"; @@ -102,15 +102,7 @@ export const ItemList = ({ )} - + ); }; diff --git a/front/yarn.lock b/front/yarn.lock index 20050e24..33a7fbb1 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -2420,13 +2420,6 @@ __metadata: languageName: node linkType: hard -"@next/font@npm:13.2.4": - version: 13.2.4 - resolution: "@next/font@npm:13.2.4" - checksum: f5319c895b6a6633b181f1c17d52dd98753dd7706db27644bf12383e0fa164f5223b8c5c70eb28edb9b9a113cdfb04a995accc16dba1655b850c9db8a05036b7 - languageName: node - linkType: hard - "@next/swc-android-arm-eabi@npm:13.2.4": version: 13.2.4 resolution: "@next/swc-android-arm-eabi@npm:13.2.4" @@ -14231,7 +14224,6 @@ __metadata: "@kyoo/primitives": "workspace:^" "@kyoo/ui": "workspace:^" "@material-symbols/svg-400": ^0.5.0 - "@next/font": 13.2.4 "@radix-ui/react-dropdown-menu": ^2.0.4 "@svgr/webpack": ^6.5.1 "@tanstack/react-query": ^4.26.1