From 25418071fed5fcb5eee7b85c776c1e53934ea92e Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Thu, 31 Aug 2023 23:28:32 +0200
Subject: [PATCH] Fix splashscreen breaking change

---
 front/apps/mobile/app/_layout.tsx         | 16 +++++++++++-----
 front/packages/ui/src/browse/list.tsx     |  3 ++-
 front/packages/ui/src/details/episode.tsx |  7 ++++---
 front/packages/ui/src/details/header.tsx  |  3 ++-
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx
index 7eab0372..b4f27db8 100644
--- a/front/apps/mobile/app/_layout.tsx
+++ b/front/apps/mobile/app/_layout.tsx
@@ -40,10 +40,10 @@ import { useTheme } from "yoshiki/native";
 import { CircularProgress } from "@kyoo/primitives";
 import { useRouter } from "solito/router";
 import "intl-pluralrules";
-import '@formatjs/intl-locale/polyfill'
-import '@formatjs/intl-displaynames/polyfill'
-import '@formatjs/intl-displaynames/locale-data/en'
-import '@formatjs/intl-displaynames/locale-data/fr'
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-displaynames/locale-data/en";
+import "@formatjs/intl-displaynames/locale-data/fr";
 
 // TODO: use a backend to load jsons.
 import en from "../../../translations/en.json";
@@ -105,14 +105,20 @@ const AuthGuard = ({ selected }: { selected: number | null }) => {
 };
 
 let rendered: boolean = false;
+SplashScreen.preventAutoHideAsync();
 
 export default function Root() {
 	const [queryClient] = useState(() => createQueryClient());
 	const theme = useColorScheme();
 	const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black });
 	const info = useAccounts();
+	const isReady = fontsLoaded && (rendered || info.type !== "loading");
 
-	if (!fontsLoaded || (!rendered && info.type === "loading")) return <SplashScreen />;
+	useEffect(() => {
+		if (isReady) SplashScreen.hideAsync();
+	}, [isReady]);
+
+	if (!isReady) return null;
 	rendered = true;
 	return (
 		<AccountContext.Provider value={info}>
diff --git a/front/packages/ui/src/browse/list.tsx b/front/packages/ui/src/browse/list.tsx
index 455d9186..46017216 100644
--- a/front/packages/ui/src/browse/list.tsx
+++ b/front/packages/ui/src/browse/list.tsx
@@ -46,6 +46,7 @@ export const ItemList = ({
 		<ImageBackground
 			src={thumbnail}
 			alt={name}
+			quality="low"
 			as={Link}
 			href={href ?? ""}
 			onFocus={() => setHovered((i) => i + 1)}
@@ -103,7 +104,7 @@ export const ItemList = ({
 					</Skeleton>
 				)}
 			</View>
-			<Poster src={poster} alt="" isLoading={isLoading} layout={{ height: percent(80) }} />
+			<Poster src={poster} alt="" quality="low" isLoading={isLoading} layout={{ height: percent(80) }} />
 		</ImageBackground>
 	);
 };
diff --git a/front/packages/ui/src/details/episode.tsx b/front/packages/ui/src/details/episode.tsx
index 78b03cbe..b803b548 100644
--- a/front/packages/ui/src/details/episode.tsx
+++ b/front/packages/ui/src/details/episode.tsx
@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { focusReset, H6, Image, Link, P, Skeleton, ts } from "@kyoo/primitives";
+import { focusReset, H6, Image, ImageProps, Link, P, Skeleton, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
@@ -48,13 +48,13 @@ export const EpisodeBox = ({
 	WithLoading<{
 		name: string | null;
 		overview: string;
-		thumbnail?: string | null;
+		thumbnail?: ImageProps["src"] | null;
 	}>) => {
 	const { t } = useTranslation();
 
 	return (
 		<View {...props}>
-			<Image src={thumbnail} alt="" layout={{ width: percent(100), aspectRatio: 16 / 9 }} />
+			<Image src={thumbnail} quality="low" alt="" layout={{ width: percent(100), aspectRatio: 16 / 9 }} />
 			<Skeleton>{isLoading || <P>{name ?? t("show.episodeNoMetadata")}</P>}</Skeleton>
 			<Skeleton>{isLoading || <P>{overview}</P>}</Skeleton>
 		</View>
@@ -123,6 +123,7 @@ export const EpisodeLine = ({
 			</P>
 			<Image
 				src={thumbnail}
+				quality="low"
 				alt=""
 				layout={{
 					width: percent(18),
diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 2445fb53..92c8bbe7 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -110,7 +110,7 @@ const TitleLine = ({
 				<Poster
 					src={poster}
 					alt={name}
-					quality="high"
+					quality="medium"
 					isLoading={isLoading}
 					layout={{
 						width: { xs: percent(50), md: percent(25) },
@@ -351,6 +351,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>;
 					<Head title={data?.name} description={data?.overview} />
 					<ImageBackground
 						src={data?.thumbnail}
+						quality="high"
 						alt=""
 						containerStyle={{
 							height: {