Fix build errors

front/apps/mobile/package.json

@@ -45,7 +45,7 @@
 		"react-native-screens": "~3.20.0",
 		"react-native-svg": "13.4.0",
 		"react-native-video": "^6.0.0-alpha.5",
-		"yoshiki": "1.2.1"
+		"yoshiki": "1.2.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.21.3",

front/apps/web/package.json

@@ -35,7 +35,7 @@
 		"react-native-web": "0.0.0-c26cb9b08",
 		"solito": "^3.0.0",
 		"superjson": "^1.12.2",
-		"yoshiki": "1.2.1",
+		"yoshiki": "1.2.2",
 		"zod": "^3.21.4"
 	},
 	"devDependencies": {

front/apps/web/src/pages/_app.tsx

@@ -21,7 +21,8 @@
 import "../polyfill";
 
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
-import { HiddenIfNoJs, SkeletonCss, ThemeSelector, WebTooltip } from "@kyoo/primitives";
+import { HiddenIfNoJs, SkeletonCss, ThemeSelector } from "@kyoo/primitives";
+import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
 import { createQueryClient, fetchQuery, getTokenWJ, QueryIdentifier, QueryPage } from "@kyoo/models";
 import { setSecureItemSync } from "@kyoo/models/src/secure-store.web";
 import { useState } from "react";

front/packages/models/src/login.ts

@@ -69,7 +69,6 @@ export const getTokenWJ = async (cookies?: string): Promise<[string, Token] | [n
 
 	if (token.expire_at <= new Date(new Date().getTime() + 10 * 1000)) {
 		const { ok, value: nToken, error } = await loginFunc("refresh", token.refresh_token);
-		console.log("refreshed", nToken);
 		if (!ok) console.error("Error refreshing token durring ssr:", error);
 		else token = nToken;
 	}

front/packages/primitives/src/icons.tsx

@@ -42,7 +42,7 @@ type IconProps = {
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css, theme } = useYoshiki();
 	const computed = css(
-		{ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle,
+		{ width: size, height: size, fill: color ?? theme.contrast } as any,
 		props,
 	);
 

front/packages/primitives/src/image.tsx

@@ -80,7 +80,7 @@ export const Image = ({
 	if (!src || state === "errored")
 		return <View {...css([{ bg: (theme) => theme.overlay0 }, layout, border], props)} />;
 
-	const nativeProps = Platform.select<ImageProps>({
+	const nativeProps = Platform.select<Partial<ImageProps>>({
 		web: {
 			defaultSource: typeof src === "string" ? { uri: src } : Array.isArray(src) ? src[0] : src,
 		},
@@ -138,7 +138,7 @@ export const ImageBackground = <AsProps = ViewProps,>({
 	Props) => {
 	const [isErrored, setErrored] = useState(false);
 
-	const nativeProps = Platform.select<ImageProps>({
+	const nativeProps = Platform.select<Partial<ImageProps>>({
 		web: {
 			defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!,
 		},

front/packages/primitives/src/slider.tsx

@@ -21,6 +21,7 @@
 import { useRef, useState } from "react";
 import { GestureResponderEvent, Platform, View } from "react-native";
 import { px, percent, Stylable, useYoshiki } from "yoshiki/native";
+import { focusReset } from "./utils";
 
 export const Slider = ({
 	progress,
@@ -106,9 +107,7 @@ export const Slider = ({
 					paddingVertical: ts(1),
 					// @ts-ignore Web only
 					cursor: "pointer",
-					focus: {
-						shadowRadius: 0,
-					},
+					focus: focusReset,
 				},
 				props,
 			)}

front/packages/primitives/src/tooltip.ts

@@ -18,18 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { atom, PrimitiveAtom, WritableAtom } from "jotai";
+import { ToastAndroid } from "react-native";
 
-type AtomWritter<T, Update> = Parameters<typeof atom<T, Update>>[1];
-export const bakedAtom = <T, Update = T>(
-	initialValue: T,
-	writter: (...args: [...Parameters<AtomWritter<T, Update>>, PrimitiveAtom<T>]) => void,
-): [PrimitiveAtom<T>, WritableAtom<T, Update>] => {
-	const baker = atom(initialValue);
-	const pub = atom<T, Update>(
-		(get) => get(baker),
-		(...args) => writter(...args, baker),
-	);
-
-	return [baker, pub];
-};
+export const tooltip = (tooltip: string, up?: boolean) => ({
+	onLongPress: () => {
+		ToastAndroid.show(tooltip, ToastAndroid.SHORT);
+	},
+});

front/packages/primitives/src/tooltip.web.tsx

@@ -18,21 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ToastAndroid, Platform, ViewProps, PressableProps } from "react-native";
 import { Theme } from "yoshiki/native";
 
-export const tooltip = (tooltip: string, up?: boolean) =>
-	Platform.select({
-		web: {
-			dataSet: { tooltip, label: tooltip, tooltipPos: up ? "up" : undefined },
-		},
-		android: {
-			onLongPress: () => {
-				ToastAndroid.show(tooltip, ToastAndroid.SHORT);
-			},
-		},
-		default: {},
-	});
+export const tooltip = (tooltip: string, up?: boolean) => ({
+	dataSet: { tooltip, label: tooltip, tooltipPos: up ? "up" : undefined },
+});
 
 export const WebTooltip = ({ theme }: { theme: Theme }) => {
 	const background = `${theme.light.colors.black}CC`;

front/packages/ui/src/login/form.tsx

@@ -44,7 +44,7 @@ export const FormPage = ({ children, ...props }: { children: ReactNode } & Styla
 
 	// TODO: Replace the hardcoded 1 to a random show/movie thumbnail.
 	const src = `${Platform.OS === "web" ? "/api/" : process.env.PUBLIC_BACK_URL}/shows/1/thumbnail`;
-	const nativeProps = Platform.select<ImageProps>({
+	const nativeProps = Platform.select<Partial<ImageProps>>({
 		web: {
 			defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!,
 		},

front/packages/ui/src/player/index.tsx

@@ -110,7 +110,9 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 	useEffect(() => {
 		if (Platform.OS !== "web" || !/Mobi/i.test(window.navigator.userAgent)) return;
 		setFullscreen(true);
-		return () => setFullscreen(false);
+		return () => {
+			setFullscreen(false);
+		};
 	}, [setFullscreen]);
 
 	if (error || playbackError)
@@ -129,12 +131,12 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
 						data.isMovie
 							? data.name
 							: data.showTitle +
-							  " " +
-							  episodeDisplayNumber({
-									seasonNumber: data.seasonNumber,
-									episodeNumber: data.episodeNumber,
-									absoluteNumber: data.absoluteNumber,
-							  })
+							" " +
+							episodeDisplayNumber({
+								seasonNumber: data.seasonNumber,
+								episodeNumber: data.episodeNumber,
+								absoluteNumber: data.absoluteNumber,
+							})
 					}
 					description={data.overview}
 				/>

front/packages/ui/src/player/keyboard.tsx

@@ -43,7 +43,7 @@ type Action =
 	| { type: "volume"; value: number }
 	| { type: "subtitle"; subtitles: Track[]; fonts: Font[] };
 
-export const reducerAtom = atom<null, Action>(null, (get, set, action) => {
+export const reducerAtom = atom(null, (get, set, action: Action) => {
 	const duration = get(durationAtom);
 	switch (action.type) {
 		case "play":

front/packages/ui/src/player/state.tsx

@@ -22,7 +22,6 @@ import { Track, WatchItem, Font } from "@kyoo/models";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { memo, useEffect, useLayoutEffect, useRef } from "react";
 import NativeVideo, { VideoProperties as VideoProps } from "./video";
-import { bakedAtom } from "../jotai-utils";
 import { Platform } from "react-native";
 
 export const playAtom = atom(true);
@@ -31,9 +30,9 @@ export const loadAtom = atom(false);
 export const bufferedAtom = atom(0);
 export const durationAtom = atom<number | undefined>(undefined);
 
-export const progressAtom = atom<number, number>(
+export const progressAtom = atom(
 	(get) => get(privateProgressAtom),
-	(_, set, value) => {
+	(_, set, value: number) => {
 		set(privateProgressAtom, value);
 		set(publicProgressAtom, value);
 	},
@@ -44,22 +43,23 @@ const publicProgressAtom = atom(0);
 export const volumeAtom = atom(100);
 export const mutedAtom = atom(false);
 
-export const [privateFullscreen, fullscreenAtom] = bakedAtom(
-	false,
-	async (_, set, value, baker) => {
+export const fullscreenAtom = atom(
+	(get) => get(privateFullscreen),
+	async (_, set, value: boolean) => {
 		try {
 			if (value) {
 				await document.body.requestFullscreen();
-				set(baker, true);
+				set(privateFullscreen, true);
 				await screen.orientation.lock("landscape");
 			} else {
 				await document.exitFullscreen();
-				set(baker, false);
+				set(privateFullscreen, false);
 				screen.orientation.unlock();
 			}
 		} catch {}
 	},
 );
+const privateFullscreen = atom(false);
 
 export const subtitleAtom = atom<Track | null>(null);
 

front/yarn.lock

@@ -3704,7 +3704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-native@npm:*, @types/react-native@npm:>= 0.70.0":
+"@types/react-native@npm:*":
   version: 0.71.3
   resolution: "@types/react-native@npm:0.71.3"
   dependencies:
@@ -10443,7 +10443,7 @@ __metadata:
     react-native-svg-transformer: ^1.0.0
     react-native-video: ^6.0.0-alpha.5
     typescript: ^4.9.5
-    yoshiki: 1.2.1
+    yoshiki: 1.2.2
   languageName: unknown
   linkType: soft
 
@@ -14254,7 +14254,7 @@ __metadata:
     superjson: ^1.12.2
     typescript: ^4.9.5
     webpack: ^5.76.1
-    yoshiki: 1.2.1
+    yoshiki: 1.2.2
     zod: ^3.21.4
   languageName: unknown
   linkType: soft
@@ -14641,13 +14641,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:1.2.1":
-  version: 1.2.1
-  resolution: "yoshiki@npm:1.2.1"
+"yoshiki@npm:1.2.2":
+  version: 1.2.2
+  resolution: "yoshiki@npm:1.2.2"
   dependencies:
     "@types/node": 18.x.x
     "@types/react": 18.x.x
-    "@types/react-native": ">= 0.70.0"
     inline-style-prefixer: ^7.0.0
   peerDependencies:
     react: "*"
@@ -14658,7 +14657,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: 8d5e58f392ca068f13bcb9b87787bf94da2e03077e733db89c40f22aaebe288536b451de2e92fba133d4241771aa87c6cc30d0bea902f94099335e162a146ab5
+  checksum: 1510ac000573ca02aa0d2c069b15a1015ba402c27f700304c6a6db38284c89c590efdd457488bc51db9a9e0b94a3768319c1a0cfce6c353a2980b3d1f8f99d5e
   languageName: node
   linkType: hard