Disable moti on the web

front/apps/web/babel.config.js

@@ -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 <https://www.gnu.org/licenses/>.
- */
-
-module.exports = function (api) {
-	api.cache(true);
-	return {
-		presets: ["babel-preset-expo"],
-		plugins: ["react-native-reanimated/plugin"],
-	};
-};

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",
-		],
 	},
 };
 

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",

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";

front/apps/web/src/polyfill.ts

@@ -18,14 +18,16 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-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
+// // FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
-if (typeof window !== "undefined") {
+// if (typeof window !== "undefined") {
-	// @ts-ignore
+// 	// @ts-ignore
-	window._frameTimestamp = null;
+// 	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;

front/packages/primitives/src/animated.tsx

@@ -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 <https://www.gnu.org/licenses/>.
- */
-
-import { motify } from "moti";
-import { Component, ComponentType, FunctionComponent } from "react";
-import { Poster } from "./image";
-
-const getDisplayName = (Cmp: ComponentType<any>) => {
-	return Cmp.displayName || Cmp.name || "Component";
-};
-
-const asClass = <Props,>(Cmp: FunctionComponent<Props>) => {
-	// TODO: ensure that every props is given at least once.
-	return class AsClass extends Component<Partial<Props> & { forward?: Partial<Props> }> {
-		static displayName = `WithClass(${getDisplayName(Cmp)})`;
-
-		constructor(props: Partial<Props> & { forward?: Partial<Props> }) {
-			super(props);
-		}
-
-		render() {
-			// @ts-ignore See todo above
-			return <Cmp {...this.props} {...this.props.forward} />;
-		}
-	};
-};
-
-export const Animated = {
-	Poster: motify(asClass(Poster))(),
-};

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";

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 <https://www.gnu.org/licenses/>.
+ */
+
+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 = () => (
+	<style jsx global>{`
+		@keyframes skeleton {
+			0% {
+				transform: translateX(-100%);
+			}
+			50% {
+				transform: translateX(100%);
+			}
+			100% {
+				transform: translateX(100%);
+			}
+		}
+	`}</style>
+);
+
+export const Skeleton = ({
+	children,
+	show: forcedShow,
+	lines = 1,
+	variant = "text",
+	...props
+}: Omit<ViewProps, "children"> & {
+	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<number | undefined>(undefined);
+	const perc = (v: number) => (v / 100) * width!;
+
+	if (forcedShow === undefined && children && children !== true) return <>{children}</>;
+
+	return (
+		<View
+			{...css(
+				[
+					{
+						position: "relative",
+					},
+					lines === 1 && { overflow: "hidden", borderRadius: px(6) },
+					(variant === "text" || variant === "header") &&
+						lines === 1 && [
+							{
+								width: percent(75),
+								height: rem(1.2),
+								margin: px(2),
+							},
+							variant === "text" && {
+								margin: px(2),
+							},
+							variant === "header" && {
+								marginBottom: rem(0.5),
+							},
+						],
+
+					variant === "round" && {
+						borderRadius: 9999999,
+					},
+					variant === "fill" && {
+						width: percent(100),
+						height: percent(100),
+					},
+					variant === "filltext" && {
+						width: percent(100),
+						height: em(1),
+					},
+				],
+				props,
+			)}
+		>
+			{children}
+			{(forcedShow || !children || children === true) &&
+				[...Array(lines)].map((_, i) => (
+					<View
+						key={`skeleton_${i}`}
+						onLayout={(e) => 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,
+						)}
+					>
+						<LinearGradient
+							start={{ x: 0, y: 0.5 }}
+							end={{ x: 1, y: 0.5 }}
+							colors={["transparent", theme.overlay1, "transparent"]}
+							{...css([
+								{
+									position: "absolute",
+									top: 0,
+									bottom: 0,
+									left: 0,
+									right: 0,
+									// @ts-ignore Web only properties
+									animation: "skeleton 1.6s linear 0.5s infinite",
+									transform: "translateX(-100%)",
+								},
+							])}
+						/>
+					</View>
+				))}
+		</View>
+	);
+};

front/packages/ui/src/browse/list.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-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 = ({
 					</Skeleton>
 				)}
 			</View>
-			<Animated.Poster
+			<Poster src={poster} alt="" isLoading={isLoading} layout={{ height: percent(80) }} />
-				src={poster}
-				alt=""
-				isLoading={isLoading}
-				forward={{ layout: { height: percent(80) } }}
-				// TODO: this does not work on the web...
-				animate={{ scale: isHovered ? 1.3 : 1 }}
-				transition={{ type: "spring" }}
-			/>
 		</ImageBackground>
 	);
 };

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