Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Allow the mediainfo popup to wrap

Browse Source
This commit is contained in:
Zoe Roux 2024-01-22 18:29:35 +01:00
parent 992b64df8a
commit 6ff41c55fe
2 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
front/packages/primitives/src/popup.tsx
View File

@ -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>
)}

17
front/packages/ui/src/components/media-info.tsx
View File

@ -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>
);