diff --git a/front/packages/primitives/src/popup.tsx b/front/packages/primitives/src/popup.tsx
index ae9963d0..6ad11db0 100644
--- a/front/packages/primitives/src/popup.tsx
+++ b/front/packages/primitives/src/popup.tsx
@@ -18,13 +18,13 @@
* along with Kyoo. If not, see .
*/
-import { ReactElement, ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
import { Container } from "./container";
-import { Portal, usePortal } from "@gorhom/portal";
+import { usePortal } from "@gorhom/portal";
import { ContrastArea, SwitchVariant, YoshikiFunc } from "./themes";
-import { View } from "react-native";
+import { View, ScrollView } from "react-native";
import { imageBorderRadius } from "./constants";
-import { px } from "yoshiki/native";
+import { px, vh } from "yoshiki/native";
import { ts } from "./utils";
export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFunc }) => {
@@ -33,29 +33,42 @@ export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFun
{({ css, theme }) => (
theme.themeOverlay,
- justifyContent: "center",
- alignItems: "center",
- },
- props,
- )}
+ {...css({
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ bg: (theme) => theme.themeOverlay,
+ justifyContent: "center",
+ alignItems: "center",
+ })}
>
theme.background,
- })}
+ {...css(
+ {
+ borderRadius: px(imageBorderRadius),
+ paddingHorizontal: 0,
+ bg: (theme) => theme.background,
+ overflow: "hidden",
+ },
+ props,
+ )}
>
- {typeof children === "function" ? children({ css, theme }) : children}
+
+ {typeof children === "function" ? children({ css, theme }) : children}
+
)}
diff --git a/front/packages/ui/src/components/media-info.tsx b/front/packages/ui/src/components/media-info.tsx
index d84c4f62..f30dcde3 100644
--- a/front/packages/ui/src/components/media-info.tsx
+++ b/front/packages/ui/src/components/media-info.tsx
@@ -19,11 +19,11 @@
*/
import { Audio, QueryIdentifier, Subtitle, WatchInfo, WatchInfoP } from "@kyoo/models";
-import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives";
+import { Button, HR, P, Popup, Skeleton, ts } from "@kyoo/primitives";
import { Fetch } from "../fetch";
import { useTranslation } from "react-i18next";
import { ScrollView, View } from "react-native";
-import { percent, px, useYoshiki } from "yoshiki/native";
+import { percent, px, useYoshiki, vh } from "yoshiki/native";
import { Fragment } from "react";
const MediaInfoTable = ({
@@ -108,18 +108,11 @@ export const MediaInfoPopup = ({
mediaType: "episode" | "movie";
mediaSlug: string;
}) => {
- const { css } = useYoshiki();
- const mediaInfoQuery = {
- path: ["video", mediaType, mediaSlug, "info"],
- parser: WatchInfoP,
- };
return (
-
-
- {(mediaInfo) => }
-
-
+
+ {(mediaInfo) => }
+
);