Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 20:24:27 -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/>. * 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 { Container } from "./container";
import { Portal, usePortal } from "@gorhom/portal"; import { usePortal } from "@gorhom/portal";
import { ContrastArea, SwitchVariant, YoshikiFunc } from "./themes"; import { ContrastArea, SwitchVariant, YoshikiFunc } from "./themes";
import { View } from "react-native"; import { View, ScrollView } from "react-native";
import { imageBorderRadius } from "./constants"; import { imageBorderRadius } from "./constants";
import { px } from "yoshiki/native"; import { px, vh } from "yoshiki/native";
import { ts } from "./utils"; import { ts } from "./utils";
export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFunc<ReactNode> }) => { export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFunc<ReactNode> }) => {
@ -33,29 +33,42 @@ export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFun
<SwitchVariant> <SwitchVariant>
{({ css, theme }) => ( {({ css, theme }) => (
<View <View
{...css( {...css({
{ position: "absolute",
position: "absolute", top: 0,
top: 0, left: 0,
left: 0, right: 0,
right: 0, bottom: 0,
bottom: 0, bg: (theme) => theme.themeOverlay,
bg: (theme) => theme.themeOverlay, justifyContent: "center",
justifyContent: "center", alignItems: "center",
alignItems: "center", })}
},
props,
)}
> >
<Container <Container
{...css({ {...css(
borderRadius: px(imageBorderRadius), {
padding: ts(4), borderRadius: px(imageBorderRadius),
gap: ts(2), paddingHorizontal: 0,
bg: (theme) => theme.background, 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> </Container>
</View> </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 { 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 { Fetch } from "../fetch";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ScrollView, View } from "react-native"; 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"; import { Fragment } from "react";
const MediaInfoTable = ({ const MediaInfoTable = ({
@ -108,18 +108,11 @@ export const MediaInfoPopup = ({
mediaType: "episode" | "movie"; mediaType: "episode" | "movie";
mediaSlug: string; mediaSlug: string;
}) => { }) => {
const { css } = useYoshiki();
const mediaInfoQuery = {
path: ["video", mediaType, mediaSlug, "info"],
parser: WatchInfoP,
};
return ( return (
<Popup> <Popup>
<ScrollView> <Fetch query={MediaInfoPopup.query(mediaType, mediaSlug)}>
<Fetch query={MediaInfoPopup.query(mediaType, mediaSlug)}> {(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />}
{(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />} </Fetch>
</Fetch>
</ScrollView>
<Button text="OK" onPress={() => close()} /> <Button text="OK" onPress={() => close()} />
</Popup> </Popup>
); );