Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Allow icons to wrap on the header page

Browse Source
This commit is contained in:
Zoe Roux 2024-01-22 20:26:27 +01:00
parent 6ff41c55fe
commit 9c03bac804
2 changed files with 83 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,5 +87,5 @@ export const usePopup = () => {
return () => removePortal("popup"); return () => removePortal("popup");
}, [current, addPortal, removePortal]); }, [current, addPortal, removePortal]);
return [setPopup, close]; return [setPopup, close] as const;
}; };

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

@ -213,76 +213,93 @@ export const TitleLine = ({
)} )}
</Skeleton> </Skeleton>
)} )}
<View {...css({ flexDirection: "row", alignItems: "center" })}> <View
{playHref !== null && ( {...css({
<IconFab flexDirection: "row",
icon={PlayArrow} alignItems: "center",
as={Link} flexWrap: "wrap",
href={playHref} justifyContent: "center",
color={{ xs: theme.user.colors.black, md: theme.colors.black }} })}
{...css({ >
bg: theme.user.accent, <View
fover: { self: { bg: theme.user.accent } }, {...css({ flexDirection: "row", alignItems: "center", justifyContent: "center" })}
})} >
{...tooltip(t("show.play"))} {playHref !== null && (
/> <IconFab
)} icon={PlayArrow}
{trailerUrl && ( as={Link}
<IconButton href={playHref}
icon={Theaters} color={{ xs: theme.user.colors.black, md: theme.colors.black }}
as={Link} {...css({
href={trailerUrl} bg: theme.user.accent,
target="_blank" fover: { self: { bg: theme.user.accent } },
color={{ xs: theme.user.contrast, md: theme.colors.white }} })}
{...tooltip(t("show.trailer"))} {...tooltip(t("show.play"))}
/> />
)} )}
{watchStatus !== undefined && type !== "collection" && slug && ( {trailerUrl && (
<WatchListInfo
type={type}
slug={slug}
status={watchStatus}
color={{ xs: theme.user.contrast, md: theme.colors.white }}
/>
)}
{type === "movie" && slug && (
<>
<IconButton <IconButton
icon={Download} icon={Theaters}
onPress={() => downloader(type, slug)} as={Link}
href={trailerUrl}
target="_blank"
color={{ xs: theme.user.contrast, md: theme.colors.white }} color={{ xs: theme.user.contrast, md: theme.colors.white }}
{...tooltip(t("home.episodeMore.download"))} {...tooltip(t("show.trailer"))}
/> />
<IconButton )}
icon={MovieInfo} {watchStatus !== undefined && type !== "collection" && slug && (
color={{ xs: theme.user.contrast, md: theme.colors.white }} <WatchListInfo
onPress={() => type={type}
setPopup(<MediaInfoPopup mediaType={"movie"} mediaSlug={slug!} close={close} />) slug={slug}
} status={watchStatus}
/>
</>
)}
{rating !== null && (
<>
<DottedSeparator
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
/>
<Rating
rating={rating}
color={{ xs: theme.user.contrast, md: theme.colors.white }} color={{ xs: theme.user.contrast, md: theme.colors.white }}
/> />
</> )}
)} {type === "movie" && slug && (
{runtime && ( <>
<> <IconButton
<DottedSeparator icon={Download}
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })} onPress={() => downloader(type, slug)}
/> color={{ xs: theme.user.contrast, md: theme.colors.white }}
<P {...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}> {...tooltip(t("home.episodeMore.download"))}
{displayRuntime(runtime)} />
</P> <IconButton
</> icon={MovieInfo}
)} color={{ xs: theme.user.contrast, md: theme.colors.white }}
onPress={() =>
setPopup(
<MediaInfoPopup mediaType={"movie"} mediaSlug={slug!} close={close} />,
)
}
/>
</>
)}
</View>
<View
{...css({ flexDirection: "row", alignItems: "center", justifyContent: "center" })}
>
{rating !== null && (
<>
<DottedSeparator
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
/>
<Rating
rating={rating}
color={{ xs: theme.user.contrast, md: theme.colors.white }}
/>
</>
)}
{runtime && (
<>
<DottedSeparator
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
/>
<P {...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}>
{displayRuntime(runtime)}
</P>
</>
)}
</View>
</View> </View>
</View> </View>
</View> </View>