From 663bf4f08d8b9b1b6dc0f40900dd2e0726b5af8b Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Sat, 13 May 2023 10:09:57 +0200 Subject: [PATCH] Improved perf on all browser --- public/local-data/websiteInterfaces.json | 20 +++++-- src/components/AppLayout.tsx | 23 +++++--- src/components/Containers/Popup.tsx | 14 ++--- src/components/Containers/UpPressable.tsx | 12 +++-- src/components/Inputs/Button.tsx | 33 ++++++------ src/components/Inputs/TextInput.tsx | 1 + src/components/LightBox.tsx | 9 ++-- src/components/Panels/DebugPopup.tsx | 52 +++++++++++++++++++ src/components/Panels/MainPanel.tsx | 24 ++++++++- src/components/Panels/SettingsPopup.tsx | 22 +++++++- src/components/PreviewCard.tsx | 9 ++-- src/contexts/atoms.ts | 6 +++ src/contexts/settings.ts | 36 ++++++++++++- src/contexts/userAgent.ts | 45 ++++++++++++++++ src/contexts/webkitFixes.ts | 18 ------- src/graphql/icuParams.ts | 2 + .../localDataGetWebsiteInterfaces.graphql | 2 + src/hooks/useIsWebkit.ts | 14 ----- src/pages/_app.tsx | 6 ++- src/pages/about-us/contact.tsx | 5 +- src/pages/library/[slug]/index.tsx | 4 +- src/pages/library/[slug]/reader.tsx | 10 ++-- src/styles/others.css | 7 --- tailwind.config.ts | 15 ------ 24 files changed, 275 insertions(+), 114 deletions(-) create mode 100644 src/components/Panels/DebugPopup.tsx create mode 100644 src/contexts/userAgent.ts delete mode 100644 src/contexts/webkitFixes.ts delete mode 100644 src/hooks/useIsWebkit.ts diff --git a/public/local-data/websiteInterfaces.json b/public/local-data/websiteInterfaces.json index bfc7ea6..219cac8 100644 --- a/public/local-data/websiteInterfaces.json +++ b/public/local-data/websiteInterfaces.json @@ -187,7 +187,9 @@ "story_x": "Story {x}", "player_name_tooltip": "Certain in-game texts use the player's name as part of the dialogue/narration. If you want to see your name in the transcript found on this website, feel free to enter your player's name here. If left empty, '(player)' will be used instead.", "download_scans": "Download scans", - "search_placeholder": "Search..." + "search_placeholder": "Search...", + "performance_mode": "Performance mode", + "performance_mode_tooltip": "This option improves performances by reducing certain visual effects (blurry backgrounds, shadows...). This mode is enabled by default on Linux, iOS, and Safari. This mode cannot be disabled on iOS or Safari as the experience would be too poor." } }, { @@ -376,7 +378,9 @@ "story_x": "Histoire {x}", "player_name_tooltip": "Certains textes dans les jeux utilisent le nom du joueur dans les dialogue/la narration. Si vous voulez voir votre nom dans les transcriptions se trouvant sur ce site web, n'hésitez pas à entrer votre nom de joueur ici. S'il n'est pas renseigné, '(player)' sera utilisé à la place.", "download_scans": "Télécharger les scans", - "search_placeholder": "Rechercher ..." + "search_placeholder": "Rechercher ...", + "performance_mode": "Mode performance", + "performance_mode_tooltip": "Cette option permet d'améliorer les performances en réduisant certains effets visuels (flous, ombres...). Ce mode est activé par défaut sur Linux, iOS et Safari. Ce mode ne peut pas être désactivé sur iOS ou Safari car l'expérience serait trop mauvaise." } }, { @@ -565,7 +569,9 @@ "story_x": null, "player_name_tooltip": null, "download_scans": null, - "search_placeholder": null + "search_placeholder": null, + "performance_mode": null, + "performance_mode_tooltip": null } }, { @@ -754,7 +760,9 @@ "story_x": null, "player_name_tooltip": null, "download_scans": null, - "search_placeholder": null + "search_placeholder": null, + "performance_mode": null, + "performance_mode_tooltip": null } }, { @@ -943,7 +951,9 @@ "story_x": null, "player_name_tooltip": null, "download_scans": null, - "search_placeholder": null + "search_placeholder": null, + "performance_mode": null, + "performance_mode_tooltip": null } } ] diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 03772c0..d6220f6 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -1,6 +1,7 @@ import Head from "next/head"; import { useSwipeable } from "react-swipeable"; import { MaterialSymbol } from "material-symbols"; +import { atom } from "jotai"; import { layout } from "../../design.config"; import { Ico } from "./Ico"; import { MainPanel } from "./Panels/MainPanel"; @@ -18,6 +19,7 @@ import { useFormat } from "hooks/useFormat"; */ const SENSIBILITY_SWIPE = 1.1; +const isIOSAtom = atom((get) => get(atoms.userAgent.os) === "iOS"); /* * ╭─────────────╮ @@ -48,11 +50,12 @@ export const AppLayout = ({ const [isSubPanelOpened, setSubPanelOpened] = useAtomPair(atoms.layout.subPanelOpened); const [isMainPanelOpened, setMainPanelOpened] = useAtomPair(atoms.layout.mainPanelOpened); const isMenuGesturesEnabled = useAtomGetter(atoms.layout.menuGesturesEnabled); - - const { format } = useFormat(); - + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout); const isScreenAtLeastXs = useAtomGetter(atoms.containerQueries.isScreenAtLeastXs); + const isIOS = useAtomGetter(isIOSAtom); + + const { format } = useFormat(); const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { @@ -121,7 +124,8 @@ export const AppLayout = ({
{isDefined(contentPanel) ? ( @@ -140,7 +144,7 @@ export const AppLayout = ({ [grid-area:content]`, cIf( (isMainPanelOpened || isSubPanelOpened) && is1ColumnLayout, - "backdrop-blur", + cIf(!isPerfModeEnabled, "backdrop-blur"), "pointer-events-none touch-none" ) )}> @@ -164,7 +168,8 @@ export const AppLayout = ({
{ const setMenuGesturesEnabled = useAtomSetter(atoms.layout.menuGesturesEnabled); const [isHidden, setHidden] = useState(!isVisible); const [isActuallyVisible, setActuallyVisible] = useState(isVisible && !isHidden); + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); useHotkeys("escape", () => onCloseRequest?.(), { enabled: isVisible }, [onCloseRequest]); @@ -68,7 +67,8 @@ export const Popup = ({
{withCloseButton && (
diff --git a/src/components/Containers/UpPressable.tsx b/src/components/Containers/UpPressable.tsx index 7762369..8f53590 100644 --- a/src/components/Containers/UpPressable.tsx +++ b/src/components/Containers/UpPressable.tsx @@ -1,6 +1,8 @@ import { MouseEventHandler, useState } from "react"; import { Link } from "components/Inputs/Link"; import { cIf, cJoin } from "helpers/className"; +import { useAtomGetter } from "helpers/atoms"; +import { atoms } from "contexts/atoms"; /* * ╭─────────────╮ @@ -27,20 +29,24 @@ export const UpPressable = ({ onClick, }: Props): JSX.Element => { const [isFocused, setFocused] = useState(false); + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); + return ( ; - onMouseUp?: MouseEventHandler; + onClick?: MouseEventHandler; + onMouseUp?: MouseEventHandler; draggable?: boolean; badgeNumber?: number; disabled?: boolean; size?: "normal" | "small"; + type?: "button" | "reset" | "submit"; } // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ @@ -43,31 +44,31 @@ export const Button = ({ alwaysNewTab = false, badgeNumber, disabled, + type, size = "normal", }: Props): JSX.Element => (
-
!disabled && onClick?.(event)} + disabled={disabled} + onClick={(event) => onClick?.(event)} onMouseUp={onMouseUp} onFocus={(event) => event.target.blur()} className={cJoin( - `group grid cursor-pointer select-none grid-flow-col place-content-center + `group grid w-full grid-flow-col place-content-center place-items-center gap-2 rounded-full border border-dark - leading-none text-dark transition-all`, + leading-none text-dark transition-all disabled:cursor-not-allowed + disabled:opacity-50 disabled:grayscale`, cIf(size === "small", "px-3 py-1 text-xs", "px-4 py-3"), - cIf(active, "!border-black bg-black !text-light drop-shadow-lg shadow-black"), + cIf(active, "!border-black bg-black !text-light shadow-lg shadow-black"), cIf( - disabled, - "cursor-not-allowed opacity-50 grayscale", - cIf( - !active, - `shadow-shade hover:bg-dark hover:text-light hover:drop-shadow-lg - active:hover:!border-black active:hover:bg-black active:hover:!text-light - active:hover:drop-shadow-lg active:hover:shadow-black` - ) + !disabled && !active, + `shadow-shade hover:bg-dark hover:text-light hover:shadow-lg hover:shadow-shade + active:hover:!border-black active:hover:bg-black active:hover:!text-light + active:hover:shadow-lg active:hover:shadow-black` ), className )}> @@ -91,7 +92,7 @@ export const Button = ({ /> )} {isDefinedAndNotEmpty(text) &&

{text}

} -
+
); diff --git a/src/components/Inputs/TextInput.tsx b/src/components/Inputs/TextInput.tsx index f5e814d..62bf045 100644 --- a/src/components/Inputs/TextInput.tsx +++ b/src/components/Inputs/TextInput.tsx @@ -27,6 +27,7 @@ export const TextInput = forwardRef( className="w-full" type="text" name={name} + autoCapitalize="off" value={value} disabled={disabled} placeholder={placeholder ?? undefined} diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index 8c0d5bd..27b8caa 100644 --- a/src/components/LightBox.tsx +++ b/src/components/LightBox.tsx @@ -39,6 +39,7 @@ export const LightBox = ({ onPressNext, }: Props): JSX.Element => { const [currentZoom, setCurrentZoom] = useState(1); + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); const { isFullscreen, toggleFullscreen, exitFullscreen, requestFullscreen } = useFullscreen( Ids.LightBox ); @@ -62,7 +63,7 @@ export const LightBox = ({ id={Ids.LightBox} className={cJoin( "fixed inset-0 z-50 grid place-content-center transition-filter duration-500", - cIf(isVisible, "backdrop-blur", "pointer-events-none touch-none") + cIf(isVisible, cIf(!isPerfModeEnabled, "backdrop-blur"), "pointer-events-none touch-none") )}>
{isDefined(src) && ( diff --git a/src/components/Panels/DebugPopup.tsx b/src/components/Panels/DebugPopup.tsx new file mode 100644 index 0000000..b3ad207 --- /dev/null +++ b/src/components/Panels/DebugPopup.tsx @@ -0,0 +1,52 @@ +import { Popup } from "components/Containers/Popup"; +import { Ico } from "components/Ico"; +import { atoms } from "contexts/atoms"; +import { sendAnalytics } from "helpers/analytics"; +import { useAtomGetter, useAtomPair } from "helpers/atoms"; + +/* + * ╭─────────────╮ + * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── + */ + +export const DebugPopup = (): JSX.Element => { + const [isDebugMenuOpened, setDebugMenuOpened] = useAtomPair(atoms.layout.debugMenuOpened); + + const os = useAtomGetter(atoms.userAgent.os); + const browser = useAtomGetter(atoms.userAgent.browser); + const engine = useAtomGetter(atoms.userAgent.engine); + const deviceType = useAtomGetter(atoms.userAgent.deviceType); + + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); + const isPerfModeToggleable = useAtomGetter(atoms.settings.isPerfModeToggleable); + const perfMode = useAtomGetter(atoms.settings.perfMode); + + return ( + { + setDebugMenuOpened(false); + sendAnalytics("Debug", "Close debug menu"); + }}> +

+ + Debug Menu +

+ +

User Agent

+
+

OS: {os}

+

Device type: {deviceType ?? "undefined"}

+

Browser: {browser}

+

Engine: {engine}

+
+ +

Settings

+
+

Raw perf mode: {perfMode}

+

Perf mode: {isPerfModeEnabled ? "true" : "false"}

+

Perf mode toggleable: {isPerfModeToggleable ? "true" : "false"}

+
+ + ); +}; diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 9dc0bf7..6071a2b 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -23,9 +23,12 @@ export const MainPanel = (): JSX.Element => { const { format } = useFormat(); const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced); const setMainPanelOpened = useAtomSetter(atoms.layout.mainPanelOpened); + const [isSettingsOpened, setSettingsOpened] = useAtomPair(atoms.layout.settingsOpened); + const [isSearchOpened, setSearchOpened] = useAtomPair(atoms.layout.searchOpened); + const [isDebugMenuOpened, setDebugMenuOpened] = useAtomPair(atoms.layout.debugMenuOpened); + const isDebugMenuAvailable = useAtomGetter(atoms.layout.debugMenuAvailable); + const closeMainPanel = useCallback(() => setMainPanelOpened(false), [setMainPanelOpened]); - const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened); - const setSearchOpened = useAtomSetter(atoms.layout.searchOpened); return (
{ content={

{format("open_settings")}

} placement={isMainPanelReduced ? "right" : "top"}>
diff --git a/src/components/Panels/SettingsPopup.tsx b/src/components/Panels/SettingsPopup.tsx index 50f5fcd..dc64053 100644 --- a/src/components/Panels/SettingsPopup.tsx +++ b/src/components/Panels/SettingsPopup.tsx @@ -11,11 +11,12 @@ import { cJoin, cIf } from "helpers/className"; import { prettyLanguage } from "helpers/formatters"; import { filterHasAttributes, isDefined } from "helpers/asserts"; import { atoms } from "contexts/atoms"; -import { useAtomGetter, useAtomPair } from "helpers/atoms"; -import { ThemeMode } from "contexts/settings"; +import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms"; +import { PerfMode, ThemeMode } from "contexts/settings"; import { Ico } from "components/Ico"; import { useFormat } from "hooks/useFormat"; import { ToolTip } from "components/ToolTip"; +import { Switch } from "components/Inputs/Switch"; /* * ╭─────────────╮ @@ -32,6 +33,9 @@ export const SettingsPopup = (): JSX.Element => { const [fontSize, setFontSize] = useAtomPair(atoms.settings.fontSize); const [playerName, setPlayerName] = useAtomPair(atoms.settings.playerName); const [themeMode, setThemeMode] = useAtomPair(atoms.settings.themeMode); + const setPerfMode = useAtomSetter(atoms.settings.perfMode); + const perfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); + const isPerfModeToggleable = useAtomGetter(atoms.settings.isPerfModeToggleable); const languages = useAtomGetter(atoms.localData.languages); const { format } = useFormat(); @@ -237,6 +241,20 @@ export const SettingsPopup = (): JSX.Element => { }} />
+ +
+
+

{format("performance_mode")}

+ + + +
+ setPerfMode(perfModeEnabled ? PerfMode.Off : PerfMode.On)} + disabled={!isPerfModeToggleable} + /> +
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx index 4fa8b55..ed4a5e1 100644 --- a/src/components/PreviewCard.tsx +++ b/src/components/PreviewCard.tsx @@ -77,6 +77,7 @@ export const PreviewCard = ({ disabled = false, onClick, }: Props): JSX.Element => { + const isPerfModeEnabled = useAtomGetter(atoms.settings.isPerfModeEnabled); const currency = useAtomGetter(atoms.settings.currency); const currencies = useAtomGetter(atoms.localData.currencies); const isHoverable = useDeviceSupportsHover(); @@ -117,7 +118,7 @@ export const PreviewCard = ({ return ( {metadata?.position === "Top" && metadataJSX} diff --git a/src/contexts/atoms.ts b/src/contexts/atoms.ts index db66009..ea89816 100644 --- a/src/contexts/atoms.ts +++ b/src/contexts/atoms.ts @@ -1,6 +1,7 @@ import { atom } from "jotai"; import { atomWithStorage } from "jotai/utils"; import { containerQueries } from "contexts/containerQueries"; +import { userAgent } from "contexts/userAgent"; import { atomPairing } from "helpers/atoms"; import { settings } from "contexts/settings"; import { UploadImageFragment } from "graphql/generated"; @@ -40,6 +41,8 @@ const searchOpened = atomPairing(atom(false)); const settingsOpened = atomPairing(atom(false)); const subPanelOpened = atomPairing(atom(false)); const mainPanelOpened = atomPairing(atom(false)); +const debugMenuOpened = atomPairing(atom(false)); +const debugMenuAvailable = atom((get) => get(settings.playerName[0]) === "debug"); const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false)); const terminalMode = atom((get) => get(settings.playerName[0]) === "root"); @@ -51,6 +54,8 @@ const layout = { mainPanelOpened, menuGesturesEnabled, terminalMode, + debugMenuAvailable, + debugMenuOpened, }; export const atoms = { @@ -59,6 +64,7 @@ export const atoms = { localData, lightBox, containerQueries, + userAgent, }; // Do not import outside of the "contexts" folder diff --git a/src/contexts/settings.ts b/src/contexts/settings.ts index ac8f4cd..612573e 100644 --- a/src/contexts/settings.ts +++ b/src/contexts/settings.ts @@ -6,6 +6,7 @@ import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms"; import { getDefaultPreferredLanguages } from "helpers/locales"; import { isDefined, isDefinedAndNotEmpty } from "helpers/asserts"; import { usePrefersDarkMode } from "hooks/useMediaQuery"; +import { userAgent } from "contexts/userAgent"; export enum ThemeMode { Dark = "dark", @@ -13,13 +14,43 @@ export enum ThemeMode { Light = "light", } +export enum PerfMode { + On = "on", + Auto = "auto", + Off = "off", +} + const preferredLanguagesAtom = atomPairing(atomWithStorage("preferredLanguages", [])); -const themeModeAtom = atomPairing(atomWithStorage("themeMode", ThemeMode.Auto)); +const themeModeAtom = atomPairing(atomWithStorage("themeMode", ThemeMode.Auto)); const darkModeAtom = atomPairing(atom(false)); const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1)); const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false)); const currencyAtom = atomPairing(atomWithStorage("currency", "USD")); const playerNameAtom = atomPairing(atomWithStorage("playerName", "")); +const perfModeAtom = atomPairing(atomWithStorage("perfMode", PerfMode.Auto)); + +const isPerfModeEnabledAtom = atom((get) => { + const os = get(userAgent.os); + const engine = get(userAgent.engine); + const perfMode = get(perfModeAtom[0]); + + if (os === "iOS") return true; + if (engine === "WebKit") return true; + if (perfMode === "auto") { + if (engine === "Blink") return false; + if (os === "Linux") return true; + if (os === "Android") return true; + } + return perfMode === PerfMode.On; +}); + +const isPerfModeToggleableAtom = atom((get) => { + const engine = get(userAgent.engine); + const os = get(userAgent.os); + if (os === "iOS") return false; + if (engine === "WebKit") return false; + return true; +}); export const settings = { preferredLanguages: preferredLanguagesAtom, @@ -29,6 +60,9 @@ export const settings = { dyslexic: dyslexicAtom, currency: currencyAtom, playerName: playerNameAtom, + perfMode: perfModeAtom, + isPerfModeEnabled: isPerfModeEnabledAtom, + isPerfModeToggleable: isPerfModeToggleableAtom, }; export const useSettings = (): void => { diff --git a/src/contexts/userAgent.ts b/src/contexts/userAgent.ts new file mode 100644 index 0000000..4976878 --- /dev/null +++ b/src/contexts/userAgent.ts @@ -0,0 +1,45 @@ +import { atom } from "jotai"; +import { useIsClient } from "usehooks-ts"; +import { useEffect } from "react"; +import { UAParser } from "ua-parser-js"; +import { atomPairing, useAtomSetter } from "helpers/atoms"; +import { getLogger } from "helpers/logger"; + +const logger = getLogger("📱 [User Agent]"); + +const osAtom = atomPairing(atom(undefined)); +const browserAtom = atomPairing(atom(undefined)); +const engineAtom = atomPairing(atom(undefined)); +const deviceTypeAtom = atomPairing(atom(undefined)); + +export const userAgent = { + os: osAtom[0], + browser: browserAtom[0], + engine: engineAtom[0], + deviceType: deviceTypeAtom[0], +}; + +export const useUserAgent = (): void => { + const setOs = useAtomSetter(osAtom); + const setBrowser = useAtomSetter(browserAtom); + const setEngine = useAtomSetter(engineAtom); + const setDeviceType = useAtomSetter(deviceTypeAtom); + + const isClient = useIsClient(); + + useEffect(() => { + const parser = new UAParser(); + + const os = parser.getOS().name; + const browser = parser.getBrowser().name; + const engine = parser.getEngine().name; + const deviceType = parser.getDevice().type; + + setOs(os); + setBrowser(browser); + setEngine(engine); + setDeviceType(deviceType); + + logger.log({ os, browser, engine, deviceType }); + }, [isClient, setBrowser, setDeviceType, setEngine, setOs]); +}; diff --git a/src/contexts/webkitFixes.ts b/src/contexts/webkitFixes.ts deleted file mode 100644 index 332fe59..0000000 --- a/src/contexts/webkitFixes.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useEffect } from "react"; -import { isDefined } from "helpers/asserts"; -import { useIsWebkit } from "hooks/useIsWebkit"; - -export const useWebkitFixes = (): void => { - const isWebkit = useIsWebkit(); - - useEffect(() => { - const next = document.getElementById("__next"); - if (isDefined(next)) { - if (isWebkit) { - next.classList.add("webkit-fixes"); - } else { - next.classList.remove("webkit-fixes"); - } - } - }, [isWebkit]); -}; diff --git a/src/graphql/icuParams.ts b/src/graphql/icuParams.ts index 0e11bc0..71f1990 100644 --- a/src/graphql/icuParams.ts +++ b/src/graphql/icuParams.ts @@ -186,4 +186,6 @@ export interface ICUParams { player_name_tooltip: never; download_scans: never; search_placeholder: never; + performance_mode: never; + performance_mode_tooltip: never; } diff --git a/src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql b/src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql index 070ea4c..9fc63b1 100644 --- a/src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql +++ b/src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql @@ -193,6 +193,8 @@ query localDataGetWebsiteInterfaces { player_name_tooltip download_scans search_placeholder + performance_mode + performance_mode_tooltip } } } diff --git a/src/hooks/useIsWebkit.ts b/src/hooks/useIsWebkit.ts deleted file mode 100644 index 5d69454..0000000 --- a/src/hooks/useIsWebkit.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useMemo } from "react"; -import UAParser from "ua-parser-js"; -import { useIsClient } from "usehooks-ts"; - -export const useIsWebkit = (): boolean => { - const isClient = useIsClient(); - return useMemo(() => { - if (isClient) { - const parser = new UAParser(); - return parser.getBrowser().name === "Safari" || parser.getOS().name === "iOS"; - } - return false; - }, [isClient]); -}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f81fe54..0fe42e5 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -20,22 +20,24 @@ import { LightBoxProvider } from "contexts/LightBoxProvider"; import { SettingsPopup } from "components/Panels/SettingsPopup"; import { useSettings } from "contexts/settings"; import { useContainerQueries } from "contexts/containerQueries"; -import { useWebkitFixes } from "contexts/webkitFixes"; import { SearchPopup } from "components/Panels/SearchPopup"; import { useScrollIntoView } from "hooks/useScrollIntoView"; +import { useUserAgent } from "contexts/userAgent"; +import { DebugPopup } from "components/Panels/DebugPopup"; const AccordsLibraryApp = (props: AppProps): JSX.Element => { useLocalData(); useSettings(); useContainerQueries(); - useWebkitFixes(); useScrollIntoView(); + useUserAgent(); return ( <> +