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

Add a custom navbar for the tv

Browse Source
This commit is contained in:
Zoe Roux 2023-01-18 22:15:48 +09:00
parent 3ccd8889f0
commit e45c595d6d
No known key found for this signature in database
GPG Key ID: B2AB52A2636E5C46
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
front/apps/mobile/app/_layout.tsx
View File

@ -19,7 +19,7 @@
*/ */
import { PortalProvider } from "@gorhom/portal"; import { PortalProvider } from "@gorhom/portal";
import { ThemeSelector } from "@kyoo/primitives"; import { ThemeSelector, ts } from "@kyoo/primitives";
import { NavbarRight, NavbarTitle } from "@kyoo/ui"; import { NavbarRight, NavbarTitle } from "@kyoo/ui";
import { createQueryClient } from "@kyoo/models"; import { createQueryClient } from "@kyoo/models";
import { QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
@ -34,9 +34,9 @@ import {
Poppins_900Black, Poppins_900Black,
} from "@expo-google-fonts/poppins"; } from "@expo-google-fonts/poppins";
import { useCallback, useLayoutEffect, useState } from "react"; import { useCallback, useLayoutEffect, useState } from "react";
import { useColorScheme } from "react-native"; import { Platform, useColorScheme } from "react-native";
import { initReactI18next } from "react-i18next"; import { initReactI18next } from "react-i18next";
import { useTheme } from "yoshiki/native"; import { useTheme, useYoshiki } from "yoshiki/native";
import "intl-pluralrules"; import "intl-pluralrules";
// TODO: use a backend to load jsons. // TODO: use a backend to load jsons.
@ -56,11 +56,28 @@ i18next.use(initReactI18next).init({
}); });
const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => { const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
const theme = useTheme(); const { css, theme } = useYoshiki();
return ( return (
<Stack <Stack
screenOptions={{ screenOptions={
Platform.isTV
? {
headerTitle: () => null,
headerRight: () => (
<NavbarTitle
onLayout={onLayout}
{...css({ paddingTop: ts(4), paddingRight: ts(4) })}
/>
),
contentStyle: {
backgroundColor: theme.background,
},
headerStyle: { backgroundColor: "transparent" },
headerBackVisible: false,
headerTransparent: true,
}
: {
headerTitle: () => <NavbarTitle onLayout={onLayout} />, headerTitle: () => <NavbarTitle onLayout={onLayout} />,
headerRight: () => <NavbarRight />, headerRight: () => <NavbarRight />,
contentStyle: { contentStyle: {
@ -70,7 +87,8 @@ const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
backgroundColor: theme.accent, backgroundColor: theme.accent,
}, },
headerTintColor: theme.colors.white, headerTintColor: theme.colors.white,
}} }
}
/> />
); );
}; };
@ -85,7 +103,7 @@ export default function Root() {
useLayoutEffect(() => { useLayoutEffect(() => {
// This does not seems to work on the global scope so why not. // This does not seems to work on the global scope so why not.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
}) });
const onLayout = useCallback(async () => { const onLayout = useCallback(async () => {
if (fontsLoaded) { if (fontsLoaded) {

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

@ -344,6 +344,8 @@ const Description = ({
export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>; slug: string }) => { export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>; slug: string }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
// TODO center elements when they are focused
return ( return (
<Fetch query={query}> <Fetch query={query}>
{({ isLoading, ...data }) => ( {({ isLoading, ...data }) => (