diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json index 01f90bfa..d22e6200 100644 --- a/front/apps/mobile/package.json +++ b/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", diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 1a1ae44f..ca57e7ab 100644 --- a/front/apps/web/package.json +++ b/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": { diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index 10b1c6e9..5533d931 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/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"; diff --git a/front/packages/models/src/login.ts b/front/packages/models/src/login.ts index 0bd89d1f..513170c2 100644 --- a/front/packages/models/src/login.ts +++ b/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; } diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx index 7f0cc27d..a229836c 100644 --- a/front/packages/primitives/src/icons.tsx +++ b/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, ); diff --git a/front/packages/primitives/src/image.tsx b/front/packages/primitives/src/image.tsx index 2f6e5aac..62c3f1eb 100644 --- a/front/packages/primitives/src/image.tsx +++ b/front/packages/primitives/src/image.tsx @@ -80,7 +80,7 @@ export const Image = ({ if (!src || state === "errored") return theme.overlay0 }, layout, border], props)} />; - const nativeProps = Platform.select({ + const nativeProps = Platform.select>({ web: { defaultSource: typeof src === "string" ? { uri: src } : Array.isArray(src) ? src[0] : src, }, @@ -138,7 +138,7 @@ export const ImageBackground = ({ Props) => { const [isErrored, setErrored] = useState(false); - const nativeProps = Platform.select({ + const nativeProps = Platform.select>({ web: { defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!, }, diff --git a/front/packages/primitives/src/slider.tsx b/front/packages/primitives/src/slider.tsx index 4de44eae..19c774a7 100644 --- a/front/packages/primitives/src/slider.tsx +++ b/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, )} diff --git a/front/packages/ui/src/jotai-utils.tsx b/front/packages/primitives/src/tooltip.ts similarity index 61% rename from front/packages/ui/src/jotai-utils.tsx rename to front/packages/primitives/src/tooltip.ts index f2254add..48780562 100644 --- a/front/packages/ui/src/jotai-utils.tsx +++ b/front/packages/primitives/src/tooltip.ts @@ -18,18 +18,10 @@ * along with Kyoo. If not, see . */ -import { atom, PrimitiveAtom, WritableAtom } from "jotai"; +import { ToastAndroid } from "react-native"; -type AtomWritter = Parameters>[1]; -export const bakedAtom = ( - initialValue: T, - writter: (...args: [...Parameters>, PrimitiveAtom]) => void, -): [PrimitiveAtom, WritableAtom] => { - const baker = atom(initialValue); - const pub = atom( - (get) => get(baker), - (...args) => writter(...args, baker), - ); - - return [baker, pub]; -}; +export const tooltip = (tooltip: string, up?: boolean) => ({ + onLongPress: () => { + ToastAndroid.show(tooltip, ToastAndroid.SHORT); + }, +}); diff --git a/front/packages/primitives/src/tooltip.tsx b/front/packages/primitives/src/tooltip.web.tsx similarity index 84% rename from front/packages/primitives/src/tooltip.tsx rename to front/packages/primitives/src/tooltip.web.tsx index f83a1892..7a214b04 100644 --- a/front/packages/primitives/src/tooltip.tsx +++ b/front/packages/primitives/src/tooltip.web.tsx @@ -18,21 +18,11 @@ * along with Kyoo. If not, see . */ -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`; diff --git a/front/packages/ui/src/login/form.tsx b/front/packages/ui/src/login/form.tsx index 8d90b917..e862b484 100644 --- a/front/packages/ui/src/login/form.tsx +++ b/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({ + const nativeProps = Platform.select>({ web: { defaultSource: typeof src === "string" ? { uri: src! } : Array.isArray(src) ? src[0] : src!, }, diff --git a/front/packages/ui/src/player/index.tsx b/front/packages/ui/src/player/index.tsx index 4dc0378a..92f514e5 100644 --- a/front/packages/ui/src/player/index.tsx +++ b/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} /> diff --git a/front/packages/ui/src/player/keyboard.tsx b/front/packages/ui/src/player/keyboard.tsx index 02ee52a6..464c2018 100644 --- a/front/packages/ui/src/player/keyboard.tsx +++ b/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, (get, set, action) => { +export const reducerAtom = atom(null, (get, set, action: Action) => { const duration = get(durationAtom); switch (action.type) { case "play": diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx index c36078e4..2c049a07 100644 --- a/front/packages/ui/src/player/state.tsx +++ b/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(undefined); -export const progressAtom = atom( +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(null); diff --git a/front/yarn.lock b/front/yarn.lock index 33a7fbb1..327ffdd3 100644 --- a/front/yarn.lock +++ b/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