Fix splashscreen breaking change

This commit is contained in:
Zoe Roux 2023-08-31 23:28:32 +02:00
parent a9d4fb769d
commit 25418071fe
No known key found for this signature in database
4 changed files with 19 additions and 10 deletions

View File

@ -40,10 +40,10 @@ import { useTheme } from "yoshiki/native";
import { CircularProgress } from "@kyoo/primitives"; import { CircularProgress } from "@kyoo/primitives";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import "intl-pluralrules"; import "intl-pluralrules";
import '@formatjs/intl-locale/polyfill' import "@formatjs/intl-locale/polyfill";
import '@formatjs/intl-displaynames/polyfill' import "@formatjs/intl-displaynames/polyfill";
import '@formatjs/intl-displaynames/locale-data/en' import "@formatjs/intl-displaynames/locale-data/en";
import '@formatjs/intl-displaynames/locale-data/fr' import "@formatjs/intl-displaynames/locale-data/fr";
// TODO: use a backend to load jsons. // TODO: use a backend to load jsons.
import en from "../../../translations/en.json"; import en from "../../../translations/en.json";
@ -105,14 +105,20 @@ const AuthGuard = ({ selected }: { selected: number | null }) => {
}; };
let rendered: boolean = false; let rendered: boolean = false;
SplashScreen.preventAutoHideAsync();
export default function Root() { export default function Root() {
const [queryClient] = useState(() => createQueryClient()); const [queryClient] = useState(() => createQueryClient());
const theme = useColorScheme(); const theme = useColorScheme();
const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black }); const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black });
const info = useAccounts(); 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; rendered = true;
return ( return (
<AccountContext.Provider value={info}> <AccountContext.Provider value={info}>

View File

@ -46,6 +46,7 @@ export const ItemList = ({
<ImageBackground <ImageBackground
src={thumbnail} src={thumbnail}
alt={name} alt={name}
quality="low"
as={Link} as={Link}
href={href ?? ""} href={href ?? ""}
onFocus={() => setHovered((i) => i + 1)} onFocus={() => setHovered((i) => i + 1)}
@ -103,7 +104,7 @@ export const ItemList = ({
</Skeleton> </Skeleton>
)} )}
</View> </View>
<Poster src={poster} alt="" isLoading={isLoading} layout={{ height: percent(80) }} /> <Poster src={poster} alt="" quality="low" isLoading={isLoading} layout={{ height: percent(80) }} />
</ImageBackground> </ImageBackground>
); );
}; };

View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * 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 { useTranslation } from "react-i18next";
import { View } from "react-native"; import { View } from "react-native";
import { Layout, WithLoading } from "../fetch"; import { Layout, WithLoading } from "../fetch";
@ -48,13 +48,13 @@ export const EpisodeBox = ({
WithLoading<{ WithLoading<{
name: string | null; name: string | null;
overview: string; overview: string;
thumbnail?: string | null; thumbnail?: ImageProps["src"] | null;
}>) => { }>) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<View {...props}> <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>{name ?? t("show.episodeNoMetadata")}</P>}</Skeleton>
<Skeleton>{isLoading || <P>{overview}</P>}</Skeleton> <Skeleton>{isLoading || <P>{overview}</P>}</Skeleton>
</View> </View>
@ -123,6 +123,7 @@ export const EpisodeLine = ({
</P> </P>
<Image <Image
src={thumbnail} src={thumbnail}
quality="low"
alt="" alt=""
layout={{ layout={{
width: percent(18), width: percent(18),

View File

@ -110,7 +110,7 @@ const TitleLine = ({
<Poster <Poster
src={poster} src={poster}
alt={name} alt={name}
quality="high" quality="medium"
isLoading={isLoading} isLoading={isLoading}
layout={{ layout={{
width: { xs: percent(50), md: percent(25) }, 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} /> <Head title={data?.name} description={data?.overview} />
<ImageBackground <ImageBackground
src={data?.thumbnail} src={data?.thumbnail}
quality="high"
alt="" alt=""
containerStyle={{ containerStyle={{
height: { height: {