Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 21:24:20 -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

35
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,8 +33,7 @@ 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,
@ -43,19 +42,33 @@ export const Popup = ({ children, ...props }: { children: ReactNode | YoshikiFun
bg: (theme) => theme.themeOverlay, bg: (theme) => theme.themeOverlay,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
})}
>
<Container
{...css(
{
borderRadius: px(imageBorderRadius),
paddingHorizontal: 0,
bg: (theme) => theme.background,
overflow: "hidden",
}, },
props, props,
)} )}
> >
<Container <ScrollView
{...css({ contentContainerStyle={{
borderRadius: px(imageBorderRadius), paddingHorizontal: px(15),
padding: ts(4), paddingVertical: ts(4),
gap: ts(2), gap: ts(2),
bg: (theme) => theme.background, }}
{...css({
maxHeight: vh(95),
flexGrow: 0,
flexShrink: 1,
})} })}
> >
{typeof children === "function" ? children({ css, theme }) : children} {typeof children === "function" ? children({ css, theme }) : children}
</ScrollView>
</Container> </Container>
</View> </View>
)} )}

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