diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json index 39082e60..c93edd14 100644 --- a/front/apps/mobile/package.json +++ b/front/apps/mobile/package.json @@ -33,6 +33,7 @@ "expo-dev-client": "~5.0.0-preview.4", "expo-file-system": "~18.0.0", "expo-font": "~13.0.0", + "expo-image": "^1.13.0", "expo-image-picker": "~16.0.0", "expo-linear-gradient": "~14.0.1", "expo-linking": "~7.0.2", @@ -49,8 +50,6 @@ "react": "18.3.1", "react-i18next": "^15.1.0", "react-native": "0.76.1", - "react-native-blurhash": "^2.0.3", - "react-native-fast-image": "^8.6.3", "react-native-mmkv": "^3.1.0", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", diff --git a/front/bun.lockb b/front/bun.lockb index 63da1771..8bbdaaae 100755 Binary files a/front/bun.lockb and b/front/bun.lockb differ diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json index 045ffd98..ec8bf0ba 100644 --- a/front/packages/primitives/package.json +++ b/front/packages/primitives/package.json @@ -17,8 +17,6 @@ "moti": "*", "react": "*", "react-native": "*", - "react-native-blurhash": "*", - "react-native-fast-image": "*", "react-native-reanimated": "*", "react-native-safe-area-context": "*", "react-native-svg": "*", diff --git a/front/packages/primitives/src/image/base-image.tsx b/front/packages/primitives/src/image/base-image.tsx index 33f4b251..430979df 100644 --- a/front/packages/primitives/src/image/base-image.tsx +++ b/front/packages/primitives/src/image/base-image.tsx @@ -19,7 +19,6 @@ */ import type { KyooImage } from "@kyoo/models"; -import type { ReactElement } from "react"; import type { ImageStyle } from "react-native"; import type { YoshikiStyle } from "yoshiki/src/type"; @@ -33,7 +32,6 @@ export type Props = { src?: KyooImage | null; quality: "low" | "medium" | "high"; alt?: string; - Err?: ReactElement | null; forcedLoading?: boolean; }; diff --git a/front/packages/primitives/src/image/image.tsx b/front/packages/primitives/src/image/image.tsx index cfa14c69..a2bdcf8f 100644 --- a/front/packages/primitives/src/image/image.tsx +++ b/front/packages/primitives/src/image/image.tsx @@ -18,12 +18,10 @@ * along with Kyoo. If not, see . */ -import { getCurrentToken } from "@kyoo/models"; -import { type ReactElement, useState } from "react"; -import { type FlexStyle, type ImageStyle, View, type ViewStyle } from "react-native"; -import { Blurhash } from "react-native-blurhash"; -import FastImage from "react-native-fast-image"; -import { percent, useYoshiki } from "yoshiki/native"; +import { type ReactElement } from "react"; +import { type ImageStyle, View, type ViewStyle } from "react-native"; +import { Image as ExpoImage } from "expo-image"; +import { useYoshiki } from "yoshiki/native"; import { Skeleton } from "../skeleton"; import type { ImageLayout, Props } from "./base-image"; @@ -33,64 +31,24 @@ export const Image = ({ alt, forcedLoading = false, layout, - Err, ...props }: Props & { style?: ImageStyle } & { layout: ImageLayout }) => { const { css } = useYoshiki(); - const [state, setState] = useState<"loading" | "errored" | "finished">( - src ? "loading" : "errored", - ); - - // This could be done with a key but this makes the API easier to use. - // This unsures that the state is resetted when the source change (useful for recycler lists.) - const [oldSource, setOldSource] = useState(src); - if (oldSource !== src) { - setState("loading"); - setOldSource(src); - } const border = { borderRadius: 6, overflow: "hidden" } satisfies ViewStyle; if (forcedLoading) return ; - if (!src || state === "errored") { - return Err !== undefined ? ( - Err - ) : ( - theme.overlay0 }, layout, border], props)} /> - ); - } - - quality ??= "high"; - const token = getCurrentToken(); + if (!src) return theme.overlay0 }, layout, border], props)} />; return ( - - {state !== "finished" && ( - - )} - setState("finished")} - onError={() => setState("errored")} - resizeMode={FastImage.resizeMode.cover} - {...(css({ - width: percent(100), - height: percent(100), - }) as { style: FlexStyle })} - /> - + ); }; diff --git a/front/packages/primitives/src/image/image.web.tsx b/front/packages/primitives/src/image/image.web.tsx index 9f26e178..ef85ffea 100644 --- a/front/packages/primitives/src/image/image.web.tsx +++ b/front/packages/primitives/src/image/image.web.tsx @@ -18,14 +18,13 @@ * along with Kyoo. If not, see . */ -import NextImage from "next/image"; import { type ReactElement, useState } from "react"; import { type ImageStyle, View, type ViewStyle } from "react-native"; import { useYoshiki } from "yoshiki/native"; import { imageBorderRadius } from "../constants"; import { Skeleton } from "../skeleton"; import type { ImageLayout, Props } from "./base-image"; -import { BlurhashContainer, useRenderType } from "./blurhash.web"; +import { BlurhashContainer } from "./blurhash.web"; export const Image = ({ src, @@ -33,7 +32,6 @@ export const Image = ({ alt, forcedLoading = false, layout, - Err, ...props }: Props & { style?: ImageStyle } & { layout: ImageLayout }) => { const { css } = useYoshiki(); @@ -45,11 +43,7 @@ export const Image = ({ if (forcedLoading) return ; if (!src || state === "errored") { - return Err !== undefined ? ( - Err - ) : ( - theme.overlay0 }, layout, border], props)} /> - ); + return theme.overlay0 }, layout, border], props)} />; } return ( diff --git a/front/packages/primitives/src/image/sprite.tsx b/front/packages/primitives/src/image/sprite.tsx index 047cd06e..45235387 100644 --- a/front/packages/primitives/src/image/sprite.tsx +++ b/front/packages/primitives/src/image/sprite.tsx @@ -18,18 +18,14 @@ * along with Kyoo. If not, see . */ -import { Image, View } from "react-native"; +import { Image as ExpoImage } from "expo-image"; export const Sprite = ({ src, alt, - width, - height, + style, x, y, - rows, - columns, - style, ...props }: { src: string; @@ -43,15 +39,17 @@ export const Sprite = ({ style?: object; }) => { return ( - - {alt} - + ); };