diff --git a/README.md b/README.md
index b981e57e..41a3a83f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-#
Kyoo
+#
Kyoo
Kyoo is a self-hosted media server focused on video content (Movies, Series & Anime). It is an alternative to Jellyfin or Plex.
diff --git a/front/app.config.ts b/front/app.config.ts
index 93b0d52c..0dea3eca 100644
--- a/front/app.config.ts
+++ b/front/app.config.ts
@@ -12,7 +12,7 @@ export const expo: ExpoConfig = {
newArchEnabled: true,
platforms: ["web", "ios", "android"],
orientation: "default",
- icon: "./public/icon-256x256.png",
+ icon: "./public/favicon-96x96-dark.png",
userInterfaceStyle: "automatic",
ios: {
supportsTablet: true,
@@ -20,15 +20,15 @@ export const expo: ExpoConfig = {
android: {
package: IS_DEV ? "dev.zoriya.kyoo.dev" : "dev.zoriya.kyoo",
adaptiveIcon: {
- foregroundImage: "./public/icon-256x256.png",
- backgroundColor: "#eff1f5",
+ foregroundImage: "./public/android-adaptive-icon.png",
+ backgroundColor: "#6b00b8",
},
edgeToEdgeEnabled: true,
},
web: {
- favicon: "./public/icon-256x256.png",
- output: "single",
bundler: "metro",
+ favicon: "./public/icon.svg",
+ output: "single",
},
updates: {
url: "https://u.expo.dev/55de6b52-c649-4a15-9a45-569ff5ed036c",
@@ -56,14 +56,9 @@ export const expo: ExpoConfig = {
[
"expo-splash-screen",
{
- image: "./public/icon-256x256.png",
+ image: "./public/splash-screen.png",
resizeMode: "contain",
- backgroundColor: "#eff1f5",
- dark: {
- image: "./public/icon-256x256.png",
- resizeMode: "contain",
- backgroundColor: "#1e1e2e",
- },
+ backgroundColor: "#6b00b8",
},
],
[
diff --git a/front/public/android-adaptive-icon.png b/front/public/android-adaptive-icon.png
new file mode 100644
index 00000000..a4d89a9f
Binary files /dev/null and b/front/public/android-adaptive-icon.png differ
diff --git a/front/public/apple-touch-icon.png b/front/public/apple-touch-icon.png
new file mode 100644
index 00000000..e0e4356f
Binary files /dev/null and b/front/public/apple-touch-icon.png differ
diff --git a/front/public/banner.png b/front/public/banner.png
deleted file mode 100644
index db5e97cd..00000000
Binary files a/front/public/banner.png and /dev/null differ
diff --git a/front/public/favicon-96x96-dark.png b/front/public/favicon-96x96-dark.png
new file mode 100644
index 00000000..a649a59c
Binary files /dev/null and b/front/public/favicon-96x96-dark.png differ
diff --git a/front/public/favicon-96x96.png b/front/public/favicon-96x96.png
new file mode 100644
index 00000000..69b1a539
Binary files /dev/null and b/front/public/favicon-96x96.png differ
diff --git a/front/public/favicon-dark.ico b/front/public/favicon-dark.ico
new file mode 100644
index 00000000..903088a2
Binary files /dev/null and b/front/public/favicon-dark.ico differ
diff --git a/front/public/favicon.ico b/front/public/favicon.ico
new file mode 100644
index 00000000..3307efed
Binary files /dev/null and b/front/public/favicon.ico differ
diff --git a/front/public/icon-128x128.png b/front/public/icon-128x128.png
deleted file mode 100644
index f602aaaa..00000000
Binary files a/front/public/icon-128x128.png and /dev/null differ
diff --git a/front/public/icon-16x16.png b/front/public/icon-16x16.png
deleted file mode 100644
index f0ecbd81..00000000
Binary files a/front/public/icon-16x16.png and /dev/null differ
diff --git a/front/public/icon-256x256.png b/front/public/icon-256x256.png
deleted file mode 100644
index a395f0fe..00000000
Binary files a/front/public/icon-256x256.png and /dev/null differ
diff --git a/front/public/icon-32x32.png b/front/public/icon-32x32.png
deleted file mode 100644
index b5944473..00000000
Binary files a/front/public/icon-32x32.png and /dev/null differ
diff --git a/front/public/icon-64x64.png b/front/public/icon-64x64.png
deleted file mode 100644
index ad7d28e9..00000000
Binary files a/front/public/icon-64x64.png and /dev/null differ
diff --git a/front/public/icon-long.svg b/front/public/icon-long.svg
new file mode 100644
index 00000000..d41ed3cc
--- /dev/null
+++ b/front/public/icon-long.svg
@@ -0,0 +1,4 @@
+
diff --git a/front/public/icon.svg b/front/public/icon.svg
index 6ce52497..e8d773c3 100644
--- a/front/public/icon.svg
+++ b/front/public/icon.svg
@@ -1,27 +1,11 @@
-
-
-
-
+
{t("show.genre")}
{genres.length ? (
diff --git a/front/src/ui/details/serie.tsx b/front/src/ui/details/serie.tsx
index 9715006c..82cfdc93 100644
--- a/front/src/ui/details/serie.tsx
+++ b/front/src/ui/details/serie.tsx
@@ -2,27 +2,15 @@ import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
-import RSvg, { Path } from "react-native-svg";
-import { withUniwind } from "uniwind";
+import { Path } from "react-native-svg";
import { EntryLine, entryDisplayNumber } from "~/components/entries";
import type { Entry, Serie } from "~/models";
-import { Container, H2 } from "~/primitives";
+import { Container, H2, Svg } from "~/primitives";
import { Fetch } from "~/query";
import { useQueryState } from "~/utils";
import { Header } from "./header";
import { EntryList } from "./season";
-export const Svg = withUniwind(RSvg, {
- stroke: {
- fromClassName: "className",
- styleProperty: "accentColor",
- },
- fill: {
- fromClassName: "className",
- styleProperty: "fill",
- },
-});
-
export const SvgWave = (props: ComponentProps) => {
// aspect-[width/height]: width/height of the svg
return (
diff --git a/front/src/ui/navbar/icon.tsx b/front/src/ui/navbar/icon.tsx
index 1f96e3e1..cd060cad 100644
--- a/front/src/ui/navbar/icon.tsx
+++ b/front/src/ui/navbar/icon.tsx
@@ -1,66 +1,15 @@
-import Svg, { Path, type SvgProps } from "react-native-svg";
-import { useYoshiki } from "yoshiki/native";
+import type { ComponentProps } from "react";
+import { View } from "react-native";
+import { Path } from "react-native-svg";
+import { Svg } from "~/primitives";
-/* export const KyooLogo = (props: SvgProps) => ( */
-/* */
-/* */
-/* */
-/* */
-/* ); */
-
-export const KyooLongLogo = ({
- height = 24,
- ...props
-}: Omit & { height?: number }) => {
- const { theme } = useYoshiki();
- const textColor = theme.contrast;
+export const KyooLongLogo = (props: ComponentProps) => {
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/front/src/ui/navbar/index.tsx b/front/src/ui/navbar/index.tsx
index 468a30a0..f4803d2a 100644
--- a/front/src/ui/navbar/index.tsx
+++ b/front/src/ui/navbar/index.tsx
@@ -5,16 +5,21 @@ import Logout from "@material-symbols/svg-400/rounded/logout.svg";
import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
import Settings from "@material-symbols/svg-400/rounded/settings.svg";
import { useGlobalSearchParams, usePathname, useRouter } from "expo-router";
-import { type Ref, useEffect, useRef, useState } from "react";
+import {
+ type Ref,
+ useEffect,
+ useRef,
+ useState,
+ type ComponentProps,
+} from "react";
import { useTranslation } from "react-i18next";
import {
Platform,
type TextInput,
type TextInputProps,
View,
- type ViewProps,
+ type PressableProps,
} from "react-native";
-import { type Theme, useYoshiki } from "yoshiki/native";
import {
A,
Avatar,
@@ -25,32 +30,36 @@ import {
Menu,
PressableFeedback,
tooltip,
- ts,
} from "~/primitives";
import { useAccount, useAccounts } from "~/providers/account-context";
import { logout } from "~/ui/login/logic";
+import { cn } from "~/utils";
import { KyooLongLogo } from "./icon";
-export const NavbarTitle = (props: { onLayout?: ViewProps["onLayout"] }) => {
+export const NavbarTitle = ({
+ className,
+ ...props
+}: ComponentProps) => {
const { t } = useTranslation();
return (
-
+
);
};
const SearchBar = ({
ref,
+ className,
...props
}: TextInputProps & { ref?: Ref }) => {
- const { theme } = useYoshiki();
const { t } = useTranslation();
const params = useGlobalSearchParams();
const [query, setQuery] = useState((params.q as string) ?? "");
@@ -78,12 +87,8 @@ const SearchBar = ({
else router.setParams({ q });
}}
placeholder={t("navbar.search")}
- placeholderTextColor={theme.contrast}
- containerStyle={{
- height: ts(4),
- flexShrink: 1,
- borderColor: (theme: Theme) => theme.contrast,
- }}
+ containerClassName="border-light"
+ className={cn("text-slate-200 dark:text-slate-200", className)}
{...tooltip(t("navbar.search"))}
{...props}
/>
@@ -97,21 +102,18 @@ const getDisplayUrl = (url: string) => {
};
export const NavbarProfile = () => {
- const { css, theme } = useYoshiki();
const { t } = useTranslation();
const account = useAccount();
const accounts = useAccounts();
return (