diff --git a/front/bun.lock b/front/bun.lock index 3b81d2a7..60003eb3 100644 --- a/front/bun.lock +++ b/front/bun.lock @@ -442,7 +442,7 @@ "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="], - "@legendapp/list": ["@legendapp/list@github:zoriya/legend-list#c36ff94", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*" } }, "zoriya-legend-list-c36ff94"], + "@legendapp/list": ["@legendapp/list@github:zoriya/legend-list#a7465a6", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*" } }, "zoriya-legend-list-a7465a6"], "@material-symbols/svg-400": ["@material-symbols/svg-400@0.40.2", "", {}, "sha512-e2yEgZW/OveVT1sGaZW1kkRWTPVghjsJYWy+vIea3q08Fv2o7FCYv23PESMyr5D4AaAXdM5dKWkF1e6yIm4swA=="], diff --git a/front/src/app/_layout.tsx b/front/src/app/_layout.tsx index fb5a9652..56447b66 100644 --- a/front/src/app/_layout.tsx +++ b/front/src/app/_layout.tsx @@ -3,10 +3,12 @@ import { Slot } from "expo-router"; import { Platform } from "react-native"; import { Providers } from "~/providers"; import "../global.css"; -import { Tooltip } from "~/primitives"; +import { Tooltip, useMobileHover } from "~/primitives"; import "~/fonts.web.css"; export default function Layout() { + useMobileHover(); + return ( diff --git a/front/src/primitives/container.tsx b/front/src/primitives/container.tsx index 8fd9fd00..e74e0f7d 100644 --- a/front/src/primitives/container.tsx +++ b/front/src/primitives/container.tsx @@ -14,7 +14,7 @@ export const Container = ({ return ( { + if (Platform.OS !== "web") return; + + // biome-ignore lint/correctness/useHookAtTopLevel: const condition + useEffect(() => { + const enableHover = () => { + console.log("pc"); + if (preventHover) return; + document.body.classList.remove("noHover"); + }; + + const disableHover = () => { + console.log("mobile"); + if (hoverTimeout) clearTimeout(hoverTimeout); + preventHover = true; + hoverTimeout = setTimeout(() => { + preventHover = false; + }, 1000); + document.body.classList.add("noHover"); + }; + + document.addEventListener("touchstart", disableHover, true); + document.addEventListener("mousemove", enableHover, true); + return () => { + document.removeEventListener("touchstart", disableHover); + document.removeEventListener("mousemove", enableHover); + }; + }, []); +}; + +export const useIsTouch = () => { + if (Platform.OS !== "web") return true; + if (typeof window === "undefined") return false; + // TODO: Subscribe to the change. + return document.body.classList.contains("noHover"); +}; diff --git a/front/src/primitives/utils/index.tsx b/front/src/primitives/utils/index.tsx index 9dece0d5..1b0d2bd0 100644 --- a/front/src/primitives/utils/index.tsx +++ b/front/src/primitives/utils/index.tsx @@ -1,6 +1,5 @@ export * from "./breakpoint"; export * from "./capitalize"; export * from "./head"; -export * from "./nojs"; +export * from "./hover"; export * from "./spacing"; -export * from "./touchonly"; diff --git a/front/src/primitives/utils/nojs.tsx b/front/src/primitives/utils/nojs.tsx deleted file mode 100644 index 8fd4796d..00000000 --- a/front/src/primitives/utils/nojs.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ViewProps } from "react-native"; - -export const hiddenIfNoJs: ViewProps = { - style: { $$css: true, noJs: "noJsHidden" } as any, -}; - -export const HiddenIfNoJs = () => ( - -); diff --git a/front/src/primitives/utils/spacing.tsx b/front/src/primitives/utils/spacing.tsx index e30d1356..4b92e287 100644 --- a/front/src/primitives/utils/spacing.tsx +++ b/front/src/primitives/utils/spacing.tsx @@ -1,17 +1,3 @@ -import { Platform } from "react-native"; - -export const important = (value: T): T => { - return `${value} !important` as T; -}; - export const ts = (spacing: number) => { return spacing * 8; }; - -export const focusReset: object = - Platform.OS === "web" - ? { - boxShadow: "unset", - outline: "none", - } - : {}; diff --git a/front/src/primitives/utils/touchonly.tsx b/front/src/primitives/utils/touchonly.tsx deleted file mode 100644 index df6d2300..00000000 --- a/front/src/primitives/utils/touchonly.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Platform, type ViewProps } from "react-native"; - -export const TouchOnlyCss = () => { - return ( - - ); -}; - -export const touchOnly: ViewProps = { - style: - Platform.OS === "web" - ? ({ $$css: true, touchOnly: "touchOnly" } as any) - : {}, -}; -export const noTouch: ViewProps = { - style: - Platform.OS === "web" - ? ({ $$css: true, noTouch: "noTouch" } as any) - : { display: "none" }, -}; - -export const useIsTouch = () => { - if (Platform.OS !== "web") return true; - if (typeof window === "undefined") return false; - // TODO: Subscribe to the change. - return document.body.classList.contains("noHover"); -}; diff --git a/front/src/ui/player/controls/index.tsx b/front/src/ui/player/controls/index.tsx index 290a99b3..ee07fc06 100644 --- a/front/src/ui/player/controls/index.tsx +++ b/front/src/ui/player/controls/index.tsx @@ -72,8 +72,6 @@ export const Controls = ({ previous={previous} next={next} setMenu={setMenu} - // Fixed is used because firefox android make the hover disappear under the navigation bar in absolute - // position: Platform.OS === "web" ? ("fixed" as any) : "absolute", className="absolute bottom-0 w-full bg-slate-900/50 px-safe pt-safe" {...hoverControls} /> diff --git a/front/src/ui/player/controls/middle-controls.tsx b/front/src/ui/player/controls/middle-controls.tsx index 9039d0a3..a56e71ec 100644 --- a/front/src/ui/player/controls/middle-controls.tsx +++ b/front/src/ui/player/controls/middle-controls.tsx @@ -35,12 +35,12 @@ export const MiddleControls = ({ "mx-6 bg-gray-800/70", !previous && "pointer-events-none opacity-0", )} - iconClassName="h-16 w-16" + iconClassName="h-16 w-16 fill-slate-200 dark:fill-slate-200" /> );