From 6ff41c55fea77a39fa5383c7f4b8e3b93dae2ff4 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 22 Jan 2024 18:29:35 +0100
Subject: [PATCH] Allow the mediainfo popup to wrap

---
 front/packages/primitives/src/popup.tsx       | 61 +++++++++++--------
 .../packages/ui/src/components/media-info.tsx | 17 ++----
 2 files changed, 42 insertions(+), 36 deletions(-)

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 <https://www.gnu.org/licenses/>.
  */
 
-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<ReactNode> }) => {
@@ -33,29 +33,42 @@ export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFun
 			<SwitchVariant>
 				{({ css, theme }) => (
 					<View
-						{...css(
-							{
-								position: "absolute",
-								top: 0,
-								left: 0,
-								right: 0,
-								bottom: 0,
-								bg: (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",
+						})}
 					>
 						<Container
-							{...css({
-								borderRadius: px(imageBorderRadius),
-								padding: ts(4),
-								gap: ts(2),
-								bg: (theme) => theme.background,
-							})}
+							{...css(
+								{
+									borderRadius: px(imageBorderRadius),
+									paddingHorizontal: 0,
+									bg: (theme) => theme.background,
+									overflow: "hidden",
+								},
+								props,
+							)}
 						>
-							{typeof children === "function" ? children({ css, theme }) : children}
+							<ScrollView
+								contentContainerStyle={{
+									paddingHorizontal: px(15),
+									paddingVertical: ts(4),
+									gap: ts(2),
+								}}
+								{...css({
+									maxHeight: vh(95),
+									flexGrow: 0,
+									flexShrink: 1,
+								})}
+							>
+								{typeof children === "function" ? children({ css, theme }) : children}
+							</ScrollView>
 						</Container>
 					</View>
 				)}
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 (
 		<Popup>
-			<ScrollView>
-				<Fetch query={MediaInfoPopup.query(mediaType, mediaSlug)}>
-					{(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />}
-				</Fetch>
-			</ScrollView>
+			<Fetch query={MediaInfoPopup.query(mediaType, mediaSlug)}>
+				{(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />}
+			</Fetch>
 			<Button text="OK" onPress={() => close()} />
 		</Popup>
 	);