mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-07 18:24:14 -04:00
wip
This commit is contained in:
Zoe Roux
parent
9b89b00b9f
commit
0e01b7c564
@ -1,25 +1,92 @@
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import { Slot } from "one";
|
||||
import { Providers } from "~/providers";
|
||||
// import { Providers } from "~/providers";
|
||||
import { createStyleRegistry, StyleRegistryProvider, useTheme } from "yoshiki/web";
|
||||
// import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
|
||||
// import { HiddenIfNoJs, SkeletonCss, TouchOnlyCss } from "@kyoo/primitives";
|
||||
import { useServerHeadInsertion } from "one";
|
||||
|
||||
export default function Layout() {
|
||||
const GlobalCssTheme = () => {
|
||||
const theme = useTheme();
|
||||
// TODO: add fonts here
|
||||
// body {font-family: ${font.style.fontFamily};}
|
||||
return (
|
||||
<>
|
||||
{typeof document !== "undefined" && (
|
||||
<>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: "hidden";
|
||||
background-color: ${theme.background};
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
border-radius: 90px;
|
||||
}
|
||||
*:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(134, 127, 127);
|
||||
}
|
||||
|
||||
#__next {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.infinite-scroll-component__outerdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::cue {
|
||||
background-color: transparent;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
`}</style>
|
||||
{/* <WebTooltip theme={theme} /> */}
|
||||
{/* <SkeletonCss /> */}
|
||||
{/* <TouchOnlyCss /> */}
|
||||
{/* <HiddenIfNoJs /> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Layout() {
|
||||
const registry = createStyleRegistry();
|
||||
useServerHeadInsertion(() => registry.flushToComponent());
|
||||
|
||||
// TODO: change this lang attr
|
||||
return (
|
||||
<StyleRegistryProvider registry={registry}>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>Kyoo</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="description" content="A portable and vast media library solution." />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
|
||||
<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
|
||||
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
|
||||
</>
|
||||
)}
|
||||
<Providers>
|
||||
<GlobalCssTheme />
|
||||
</head>
|
||||
|
||||
<body className="hoverEnabled">
|
||||
{/* <Providers> */}
|
||||
<Slot />
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</Providers>
|
||||
</>
|
||||
{/* </Providers> */}
|
||||
</body>
|
||||
</html>
|
||||
</StyleRegistryProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -63,59 +63,6 @@ import { withTranslations } from "../i18n";
|
||||
|
||||
const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
|
||||
|
||||
const GlobalCssTheme = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: "hidden";
|
||||
background-color: ${theme.background};
|
||||
font-family: ${font.style.fontFamily};
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
border-radius: 90px;
|
||||
}
|
||||
*:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(134, 127, 127);
|
||||
}
|
||||
|
||||
#__next {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.infinite-scroll-component__outerdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::cue {
|
||||
background-color: transparent;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
`}</style>
|
||||
<WebTooltip theme={theme} />
|
||||
<SkeletonCss />
|
||||
<TouchOnlyCss />
|
||||
<HiddenIfNoJs />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
|
||||
if (typeof window === "undefined") return children;
|
||||
const registry = useStyleRegistry();
|
||||
|
||||
890
front/bun.lock
890
front/bun.lock
File diff suppressed because it is too large
Load Diff
@ -12,25 +12,29 @@
|
||||
"format": "biome format .",
|
||||
"format:fix": "biome format . --write"
|
||||
},
|
||||
"workspaces": ["packages/*"],
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.62.15",
|
||||
"expo": "~52.0.17",
|
||||
"expo-build-properties": "^0.13.1",
|
||||
"expo-localization": "^16.0.0",
|
||||
"one": "1.1.385",
|
||||
"react": "^18.3.1",
|
||||
"react-native": "0.76.4",
|
||||
"react-native-reanimated": "~3.16.5",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "4.4.0",
|
||||
"react-native-web": "^0.19.12"
|
||||
"@kyoo/models": "workspace:*",
|
||||
"@kyoo/primitives": "workspace:*",
|
||||
"@tanstack/react-query": "^5.64.2",
|
||||
"expo": "~52.0.27",
|
||||
"expo-build-properties": "^0.13.2",
|
||||
"expo-localization": "^16.0.1",
|
||||
"jotai": "^2.11.1",
|
||||
"one": "1.1.406",
|
||||
"react": "^19.0.0",
|
||||
"react-native": "0.77.0",
|
||||
"react-native-reanimated": "~3.16.7",
|
||||
"react-native-safe-area-context": "5.1.0",
|
||||
"react-native-screens": "4.5.0",
|
||||
"react-native-web": "^0.19.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@tanstack/react-query-devtools": "^5.62.15",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"typescript": "5.7.2",
|
||||
"vite": "^6"
|
||||
"@tanstack/react-query-devtools": "^5.64.2",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"typescript": "5.7.3",
|
||||
"vite": "^6.0.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,27 +18,27 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
export { Header, Main, Nav, Footer, UL } from "@expo/html-elements";
|
||||
export * from "./text";
|
||||
// export { Header, Main, Nav, Footer, UL } from "@expo/html-elements";
|
||||
// export * from "./text";
|
||||
export * from "./themes";
|
||||
export * from "./icons";
|
||||
export * from "./links";
|
||||
export * from "./avatar";
|
||||
export * from "./image";
|
||||
export * from "./skeleton";
|
||||
export * from "./tooltip";
|
||||
export * from "./container";
|
||||
export * from "./divider";
|
||||
export * from "./progress";
|
||||
export * from "./slider";
|
||||
export * from "./snackbar";
|
||||
export * from "./alert";
|
||||
export * from "./menu";
|
||||
export * from "./popup";
|
||||
export * from "./select";
|
||||
export * from "./input";
|
||||
export * from "./button";
|
||||
export * from "./chip";
|
||||
|
||||
export * from "./utils";
|
||||
export * from "./constants";
|
||||
// export * from "./icons";
|
||||
// export * from "./links";
|
||||
// export * from "./avatar";
|
||||
// export * from "./image";
|
||||
// export * from "./skeleton";
|
||||
// export * from "./tooltip";
|
||||
// export * from "./container";
|
||||
// export * from "./divider";
|
||||
// export * from "./progress";
|
||||
// export * from "./slider";
|
||||
// export * from "./snackbar";
|
||||
// export * from "./alert";
|
||||
// export * from "./menu";
|
||||
// export * from "./popup";
|
||||
// export * from "./select";
|
||||
// export * from "./input";
|
||||
// export * from "./button";
|
||||
// export * from "./chip";
|
||||
//
|
||||
// export * from "./utils";
|
||||
// export * from "./constants";
|
||||
|
||||
@ -19,12 +19,10 @@
|
||||
*/
|
||||
|
||||
import { LinearGradient as LG } from "expo-linear-gradient";
|
||||
import { memo, useEffect } from "react";
|
||||
import { Platform, StyleSheet, View, type ViewProps } from "react-native";
|
||||
import { useEffect } from "react";
|
||||
import { StyleSheet, View, type ViewProps } from "react-native";
|
||||
import Animated, {
|
||||
SharedValue,
|
||||
useAnimatedStyle,
|
||||
useDerivedValue,
|
||||
useSharedValue,
|
||||
withDelay,
|
||||
withRepeat,
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { Platform, type ViewProps } from "react-native";
|
||||
|
||||
export const TouchOnlyCss = () => {
|
||||
|
||||
3
front/routes.d.ts
vendored
3
front/routes.d.ts
vendored
@ -1,3 +1,6 @@
|
||||
// deno-lint-ignore-file
|
||||
/* eslint-disable */
|
||||
// biome-ignore: needed import
|
||||
import type { OneRouter } from 'one'
|
||||
|
||||
declare module 'one' {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// import { useUserTheme } from "@kyoo/models";
|
||||
import { ThemeSelector } from "@kyoo/primitives";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ComponentType, ReactNode, useState } from "react";
|
||||
|
||||
@ -7,6 +9,17 @@ const QueryProvider = ({ children }: { children: ReactNode }) => {
|
||||
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
|
||||
};
|
||||
|
||||
const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
||||
// TODO: change "auto" and use the user's theme cookie
|
||||
const userTheme = "auto"; //useUserTheme("auto");
|
||||
|
||||
return (
|
||||
<ThemeSelector theme={userTheme} font={{ normal: "inherit" }}>
|
||||
{children}
|
||||
</ThemeSelector>
|
||||
);
|
||||
};
|
||||
|
||||
type ProviderComponent<P = {}> = ComponentType<{ children: ReactNode } & P>;
|
||||
type Provider = ProviderComponent;
|
||||
|
||||
@ -16,7 +29,10 @@ const withProviders = (
|
||||
children: ReactNode;
|
||||
}> => {
|
||||
const ProviderImpl = ({ children }: { children: ReactNode }) => {
|
||||
return providers.reduceRight((acc, Prov) => <Prov>{acc}</Prov>, children);
|
||||
return providers.reduceRight(
|
||||
(acc, Prov) => <Prov key={Prov.displayName}>{acc}</Prov>,
|
||||
children,
|
||||
);
|
||||
};
|
||||
return ProviderImpl;
|
||||
};
|
||||
@ -25,7 +41,7 @@ export const Providers = withProviders([
|
||||
QueryProvider,
|
||||
// AccountProvider,
|
||||
// HydratationBoundary,
|
||||
// [ThemeSelector, }],
|
||||
ThemeProvider,
|
||||
// PortalProvider,
|
||||
// SnackbarProvider
|
||||
// ConnectionErrorVerifier
|
||||
|
||||
@ -7,5 +7,15 @@ export default {
|
||||
// needed to fix ssr error of react-query
|
||||
noExternal: true,
|
||||
},
|
||||
plugins: [one()],
|
||||
plugins: [
|
||||
one({
|
||||
deps: {
|
||||
"@expo/html-elements": {
|
||||
"**/*.js": ["jsx"],
|
||||
},
|
||||
"inline-style-prefixer": "interop",
|
||||
"inline-style-prefixer/**": "interop",
|
||||
},
|
||||
}),
|
||||
],
|
||||
} satisfies UserConfig;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user