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

Front: Make MediaInfo Scrollable

Browse Source
This commit is contained in:
Arthur Jamet 2024-01-22 17:57:21 +01:00 committed by Zoe Roux
parent 521a68b4c7
commit d9f4a6ff8d
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,8 +22,9 @@ import { Audio, Subtitle, WatchInfo, WatchInfoP } from "@kyoo/models";
import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives"; import { Button, HR, P, Popup, Skeleton } from "@kyoo/primitives";
import { Fetch } from "../fetch"; import { Fetch } from "../fetch";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { View } from "react-native"; import { ScrollView, View } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { percent, px, useYoshiki } from "yoshiki/native";
import { Fragment } from "react";
const MediaInfoTable = ({ const MediaInfoTable = ({
mediaInfo: { path, video, container, audios, subtitles, duration }, mediaInfo: { path, video, container, audios, subtitles, duration },
@ -81,8 +82,8 @@ const MediaInfoTable = ({
<View> <View>
{table.map((g) => {table.map((g) =>
Object.entries(g).map(([label, value], index, l) => ( Object.entries(g).map(([label, value], index, l) => (
<> <Fragment key={`media-info-${label}`}>
<View key={`media-info-${label}`} {...css({ flexDirection: "row" })}> <View {...css({ flexDirection: "row" })}>
<View {...css({ flex: 1 })}> <View {...css({ flex: 1 })}>
<P>{label}</P> <P>{label}</P>
</View> </View>
@ -91,7 +92,7 @@ const MediaInfoTable = ({
</View> </View>
</View> </View>
{index == l.length - 1 && <HR />} {index == l.length - 1 && <HR />}
</> </Fragment>
)), )),
)} )}
</View> </View>
@ -107,17 +108,20 @@ export const MediaInfoPopup = ({
mediaType: "episode" | "movie"; mediaType: "episode" | "movie";
mediaSlug: string; mediaSlug: string;
}) => { }) => {
const y = useYoshiki();
const mediaInfoQuery = { const mediaInfoQuery = {
path: ["video", mediaType, mediaSlug, "info"], path: ["video", mediaType, mediaSlug, "info"],
parser: WatchInfoP, parser: WatchInfoP,
}; };
return ( return (
<Popup> <Popup>
{({ css }) => ( {() => (
<> <>
<Fetch query={mediaInfoQuery}> <ScrollView>
{(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />} <Fetch query={mediaInfoQuery}>
</Fetch> {(mediaInfo) => <MediaInfoTable mediaInfo={mediaInfo} />}
</Fetch>
</ScrollView>
<Button text="OK" onPress={() => close()} /> <Button text="OK" onPress={() => close()} />
</> </>
)} )}

1
front/packages/ui/src/details/header.tsx
View File

@ -256,6 +256,7 @@ export const TitleLine = ({
{type === "movie" && ( {type === "movie" && (
<IconButton <IconButton
icon={MovieInfo} icon={MovieInfo}
color={{ xs: theme.user.contrast, md: theme.colors.white }}
onPress={() => onPress={() =>
slug && slug &&
setPopup( setPopup(