Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Disable moti on the web

Browse Source
This commit is contained in:
Zoe Roux 2023-03-15 19:10:17 +09:00
parent dae11994c2
commit 2b86a469a9
10 changed files with 179 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
front/apps/web/babel.config.js
View File

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

41
front/apps/web/next.config.js
View File

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

1
front/apps/web/package.json
View File

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

2
front/apps/web/src/pages/_app.tsx
View File

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

14
front/apps/web/src/polyfill.ts
View File

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

47
front/packages/primitives/src/animated.tsx
View File

@ -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))(),
};

1
front/packages/primitives/src/index.ts
View File

@ -36,5 +36,4 @@ export * from "./input";
export * from "./button";
export * from "./chip";
export * from "./animated";
export * from "./utils";

149
front/packages/primitives/src/skeleton.web.tsx Normal file
View File

@ -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>
);
};

12
front/packages/ui/src/browse/list.tsx
View File

@ -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
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" }}
/>
<Poster src={poster} alt="" isLoading={isLoading} layout={{ height: percent(80) }} />
</ImageBackground>
);
};

8
front/yarn.lock
View File

@ -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