Dedup react types usage

front/apps/mobile/package.json

@@ -64,7 +64,6 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.24.5",
-		"@types/react": "~18.2.79",
 		"react-native-svg-transformer": "^1.4.0",
 		"typescript": "~5.3.3"
 	},

front/apps/web/package.json

@@ -51,7 +51,6 @@
 	"devDependencies": {
 		"@svgr/webpack": "^8.1.0",
 		"@types/node": "20.12.12",
-		"@types/react": "18.3.2",
 		"@types/react-dom": "18.3.0",
 		"copy-webpack-plugin": "^12.0.2",
 		"react-native": "0.74.1",

front/package.json

@@ -17,6 +17,7 @@
 	"workspaces": ["apps/*", "packages/*"],
 	"devDependencies": {
 		"@biomejs/biome": "1.7.3",
+		"@types/react": "~18.2.79",
 		"typescript": "5.4.5"
 	},
 	"packageManager": "yarn@3.2.4"

front/packages/models/package.json

@@ -5,7 +5,6 @@
 	"sideEffects": false,
 	"packageManager": "yarn@3.2.4",
 	"devDependencies": {
-		"@types/react": "18.3.2",
 		"react-native-mmkv": "^2.12.2",
 		"typescript": "^5.4.5"
 	},

front/packages/primitives/package.json

@@ -6,7 +6,6 @@
 	"packageManager": "yarn@3.2.4",
 	"devDependencies": {
 		"@gorhom/portal": "^1.0.14",
-		"@types/react": "18.3.2",
 		"typescript": "^5.4.5"
 	},
 	"peerDependencies": {

front/packages/primitives/src/themes/theme.tsx

@@ -147,7 +147,7 @@ export const ThemeSelector = ({
 }) => {
 	const newTheme = selectMode({ ...catppuccin, font }, theme);
 
-	return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
+	return <ThemeProvider theme={newTheme}>{children as any}</ThemeProvider>;
 };
 
 export type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
@@ -162,7 +162,11 @@ export const SwitchVariant = ({ children }: { children: ReactNode | YoshikiFunc<
 
 	return (
 		<ThemeProvider theme={switchVariant(theme)}>
-			{typeof children === "function" ? <YoshikiProvider>{children}</YoshikiProvider> : children}
+			{typeof children === "function" ? (
+				<YoshikiProvider>{children}</YoshikiProvider>
+			) : (
+				(children as any)
+			)}
 		</ThemeProvider>
 	);
 };
@@ -194,7 +198,11 @@ export const ContrastArea = ({
 					: theme
 			}
 		>
-			{typeof children === "function" ? <YoshikiProvider>{children}</YoshikiProvider> : children}
+			{typeof children === "function" ? (
+				<YoshikiProvider>{children}</YoshikiProvider>
+			) : (
+				(children as any)
+			)}
 		</ThemeProvider>
 	);
 };

front/packages/ui/package.json

@@ -10,7 +10,6 @@
 	"devDependencies": {
 		"@gorhom/portal": "^1.0.14",
 		"@shopify/flash-list": "^1.6.4",
-		"@types/react": "18.3.2",
 		"react-native-uuid": "^2.0.2",
 		"typescript": "^5.4.5"
 	},

front/packages/ui/src/player/components/right-buttons.tsx

@@ -29,9 +29,9 @@ import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { type Stylable, useYoshiki } from "yoshiki/native";
+import { useDisplayName } from "../../utils";
 import { fullscreenAtom, subtitleAtom } from "../state";
 import { AudiosMenu, QualitiesMenu } from "../video";
-import { useDisplayName } from "../../utils";
 
 export const RightButtons = ({
 	audios,

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

@@ -49,6 +49,7 @@ import NativeVideo, {
 	SelectedVideoTrackType,
 } from "react-native-video";
 import { useYoshiki } from "yoshiki/native";
+import { useDisplayName } from "../utils";
 import { PlayMode, audioAtom, playModeAtom, subtitleAtom } from "./state";
 
 const MimeTypes: Map<string, string> = new Map([
@@ -102,7 +103,7 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
 				}}
 				selectedVideoTrack={
 					video === -1
-						? { type: SelectedVideoTrackType.AUDO }
+						? { type: SelectedVideoTrackType.AUTO }
 						: { type: SelectedVideoTrackType.RESOLUTION, value: video }
 				}
 				// when video file is invalid, audio is undefined
@@ -130,12 +131,13 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
 export default Video;
 
 // mobile should be able to play everything
-export const canPlay = (codec: string) => true;
+export const canPlay = (_codec: string) => true;
 
 type CustomMenu = ComponentProps<typeof Menu<ComponentProps<typeof IconButton>>>;
 export const AudiosMenu = ({ audios, ...props }: CustomMenu & { audios?: Audio[] }) => {
 	const info = useAtomValue(infoAtom);
 	const [audio, setAudio] = useAtom(audioAtom);
+	const getDisplayName = useDisplayName();
 
 	if (!info || info.audioTracks.length < 2) return null;
 
@@ -144,7 +146,7 @@ export const AudiosMenu = ({ audios, ...props }: CustomMenu & { audios?: Audio[]
 			{info.audioTracks.map((x) => (
 				<Menu.Item
 					key={x.index}
-					label={audios?.[x.index].displayName ?? x.title ?? x.language ?? "Unknown"}
+					label={audios ? getDisplayName(audios[x.index]) : x.title ?? x.language ?? "Unknown"}
 					selected={audio!.index === x.index}
 					onSelect={() => setAudio(x as any)}
 				/>

front/packages/ui/src/player/video.web.tsx

@@ -36,6 +36,7 @@ import { useTranslation } from "react-i18next";
 import type { VideoProps } from "react-native-video";
 import toVttBlob from "srt-webvtt";
 import { useForceRerender, useYoshiki } from "yoshiki";
+import { useDisplayName } from "../utils";
 import { PlayMode, audioAtom, playAtom, playModeAtom, progressAtom, subtitleAtom } from "./state";
 
 let hls: Hls | null = null;
@@ -360,6 +361,7 @@ export const AudiosMenu = ({
 	const { t } = useTranslation();
 	const rerender = useForceRerender();
 	const [_, setAudio] = useAtom(audioAtom);
+	const getDisplayName = useDisplayName();
 	// force rerender when mode changes
 	useAtomValue(playModeAtom);
 
@@ -377,7 +379,7 @@ export const AudiosMenu = ({
 			{hls.audioTracks.map((x, i) => (
 				<Menu.Item
 					key={i.toString()}
-					label={audios?.[i]?.displayName ?? x.name}
+					label={audios ? getDisplayName(audios[i]) : x.name}
 					selected={hls!.audioTrack === i}
 					onSelect={() => setAudio(audios?.[i] ?? ({ index: i } as any))}
 				/>

front/yarn.lock

@@ -3250,7 +3250,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@kyoo/models@workspace:packages/models"
   dependencies:
-    "@types/react": 18.3.2
     react-native-mmkv: ^2.12.2
     typescript: ^5.4.5
     zod: ^3.23.8
@@ -3272,7 +3271,6 @@ __metadata:
     "@gorhom/portal": ^1.0.14
     "@radix-ui/react-select": ^2.0.0
     "@tanstack/react-query": ^5.37.1
-    "@types/react": 18.3.2
     blurhash: ^2.0.5
     react-native-blurhash: ^2.0.2
     react-native-fast-image: ^8.6.3
@@ -3335,7 +3333,6 @@ __metadata:
     "@kyoo/models": "workspace:^"
     "@kyoo/primitives": "workspace:^"
     "@shopify/flash-list": ^1.6.4
-    "@types/react": 18.3.2
     expo-file-system: ^17.0.1
     expo-router: ^3.5.14
     react-native-uuid: ^2.0.2
@@ -5336,16 +5333,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:18.3.2":
-  version: 18.3.2
-  resolution: "@types/react@npm:18.3.2"
-  dependencies:
-    "@types/prop-types": "*"
-    csstype: ^3.0.2
-  checksum: d0b8b9d0ede6cd28dbbe34106d914b5e3652d9d7aa9d0f32fe6171506b6fc7c826d9d6571642976a5422bd29c5022fd893a710ed59a1177a0c1df8e02cf17ffe
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:~18.2.79":
   version: 18.2.79
   resolution: "@types/react@npm:18.2.79"
@@ -9619,6 +9606,7 @@ __metadata:
   resolution: "kyoo@workspace:."
   dependencies:
     "@biomejs/biome": 1.7.3
+    "@types/react": ~18.2.79
     typescript: 5.4.5
   languageName: unknown
   linkType: soft
@@ -10442,7 +10430,6 @@ __metadata:
     "@tanstack/query-sync-storage-persister": ^5.37.1
     "@tanstack/react-query": ^5.37.1
     "@tanstack/react-query-persist-client": ^5.37.1
-    "@types/react": ~18.2.79
     array-shuffle: ^3.0.0
     babel-plugin-transform-inline-environment-variables: ^0.4.4
     expo: ^51.0.8
@@ -13761,7 +13748,6 @@ __metadata:
     "@tanstack/react-query": ^5.37.1
     "@tanstack/react-query-devtools": ^5.37.1
     "@types/node": 20.12.12
-    "@types/react": 18.3.2
     "@types/react-dom": 18.3.0
     array-shuffle: ^3.0.0
     copy-webpack-plugin: ^12.0.2