Create a usePopup to simplify popup creation

front/packages/primitives/src/popup.tsx

@@ -18,10 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode } from "react";
+import { ReactElement, ReactNode, useCallback, useEffect, useState } from "react";
 import { Container } from "./container";
-import { Portal } from "@gorhom/portal";
+import { Portal, usePortal } from "@gorhom/portal";
-import { SwitchVariant, YoshikiFunc } from "./themes";
+import { ContrastArea, SwitchVariant, YoshikiFunc } from "./themes";
 import { View } from "react-native";
 import { imageBorderRadius } from "./constants";
 import { px } from "yoshiki/native";
@@ -29,7 +29,7 @@ import { ts } from "./utils";
 
 export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFunc<ReactNode> }) => {
 	return (
-		<Portal>
+		<ContrastArea mode="user">
 			<SwitchVariant>
 				{({ css, theme }) => (
 					<View
@@ -60,6 +60,19 @@ export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFun
 					</View>
 				)}
 			</SwitchVariant>
-		</Portal>
+		</ContrastArea>
 	);
 };
+
+export const usePopup = () => {
+	const { addPortal, removePortal } = usePortal();
+	const [current, setPopup] = useState<ReactNode>();
+	const close = useCallback(() => setPopup(undefined), []);
+
+	useEffect(() => {
+		addPortal("popup", current);
+		return () => removePortal("popup");
+	}, [current, addPortal, removePortal]);
+
+	return [setPopup, close];
+};

front/packages/ui/src/components/context-menus.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { IconButton, Menu, tooltip } from "@kyoo/primitives";
+import { IconButton, Menu, tooltip, usePopup } from "@kyoo/primitives";
 import { ComponentProps, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg";
@@ -51,7 +51,7 @@ export const EpisodesContext = ({
 	const downloader = useDownloader();
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
-	const [popup, setPopup] = useState<ReactElement | undefined>(undefined);
+	const [setPopup, close] = usePopup();
 
 	const queryClient = useQueryClient();
 	const mutation = useMutation({
@@ -109,19 +109,12 @@ export const EpisodesContext = ({
 							label={t("home.episodeMore.mediainfo")}
 							icon={MovieInfo}
 							onSelect={() =>
-								setPopup(
+								setPopup(<MediaInfoPopup mediaType={type} mediaSlug={slug} close={close} />)
-									<MediaInfoPopup
-										mediaType={type}
-										mediaSlug={slug}
-										close={() => setPopup(undefined)}
-									/>,
-								)
 							}
 						/>
 					</>
 				)}
 			</Menu>
-			{popup}
 		</>
 	);
 };

front/packages/ui/src/details/header.tsx

@@ -47,9 +47,9 @@ import {
 	ts,
 	Chip,
 	DottedSeparator,
-	focusReset,
+	usePopup,
 } from "@kyoo/primitives";
-import { Fragment, ReactElement, useState } from "react";
+import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg";
 import { ImageStyle, Platform, View } from "react-native";
@@ -112,7 +112,7 @@ export const TitleLine = ({
 	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
 	const downloader = useDownloader();
-	const [popup, setPopup] = useState<ReactElement | undefined>(undefined);
+	const [setPopup, close] = usePopup();
 
 	return (
 		<Container
@@ -246,30 +246,22 @@ export const TitleLine = ({
 							/>
 						)}
 						{type === "movie" && slug && (
+							<>
 								<IconButton
 									icon={Download}
 									onPress={() => downloader(type, slug)}
 									color={{ xs: theme.user.contrast, md: theme.colors.white }}
 									{...tooltip(t("home.episodeMore.download"))}
 								/>
-						)}
-						{type === "movie" && (
 								<IconButton
 									icon={MovieInfo}
 									color={{ xs: theme.user.contrast, md: theme.colors.white }}
 									onPress={() =>
-									slug &&
+										setPopup(<MediaInfoPopup mediaType={"movie"} mediaSlug={slug!} close={close} />)
-									setPopup(
-										<MediaInfoPopup
-											mediaType={type}
-											mediaSlug={slug}
-											close={() => setPopup(undefined)}
-										/>,
-									)
 									}
 								/>
+							</>
 						)}
-						{popup}
 						{rating !== null && (
 							<>
 								<DottedSeparator

front/packages/ui/src/settings/index.tsx

@@ -45,6 +45,7 @@ import {
 	SwitchVariant,
 	imageBorderRadius,
 	ts,
+	usePopup,
 } from "@kyoo/primitives";
 import { DefaultLayout } from "../layout";
 import { Children, ComponentProps, ReactElement, ReactNode, useState } from "react";
@@ -257,10 +258,11 @@ const ChangePasswordPopup = ({
 	);
 };
 
-const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void }) => {
+const AccountSettings = () => {
 	const account = useAccount();
 	const { css, theme } = useYoshiki();
 	const { t } = useTranslation();
+	const [setPopup, close] = usePopup();
 
 	const queryClient = useQueryClient();
 	const { mutateAsync } = useMutation({
@@ -335,7 +337,7 @@ const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void })
 									label={t("settings.account.username.label")}
 									inital={account.username}
 									apply={async (v) => await mutateAsync({ username: v })}
-									close={() => setPopup(undefined)}
+									close={close}
 								/>,
 							)
 						}
@@ -356,7 +358,7 @@ const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void })
 									label={t("settings.account.email.label")}
 									inital={account.email}
 									apply={async (v) => await mutateAsync({ email: v })}
-									close={() => setPopup(undefined)}
+									close={close}
 								/>,
 							)
 						}
@@ -375,7 +377,7 @@ const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void })
 									icon={Password}
 									label={t("settings.account.password.label")}
 									apply={async (op, np) => await editPassword({ oldPassword: op, newPassword: np })}
-									close={() => setPopup(undefined)}
+									close={close}
 								/>,
 							)
 						}
@@ -389,11 +391,9 @@ const AccountSettings = ({ setPopup }: { setPopup: (e?: ReactElement) => void })
 export const SettingsPage: QueryPage = () => {
 	const { t, i18n } = useTranslation();
 	const languages = new Intl.DisplayNames([i18n.language ?? "en"], { type: "language" });
-	const [popup, setPopup] = useState<ReactElement | undefined>(undefined);
 
 	const theme = useUserTheme("auto");
 	return (
-		<>
 		<ScrollView contentContainerStyle={{ gap: ts(4), paddingBottom: ts(4) }}>
 			<SettingsContainer title={t("settings.general.label")}>
 				<Preference
@@ -427,7 +427,7 @@ export const SettingsPage: QueryPage = () => {
 					/>
 				</Preference>
 			</SettingsContainer>
-				<AccountSettings setPopup={setPopup} />
+			<AccountSettings />
 			<SettingsContainer title={t("settings.about.label")}>
 				<Link
 					href="https://github.com/zoriya/kyoo/releases/latest/download/kyoo.apk"
@@ -448,8 +448,6 @@ export const SettingsPage: QueryPage = () => {
 				</Link>
 			</SettingsContainer>
 		</ScrollView>
-			{popup}
-		</>
 	);
 };