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