diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx index 6a2d49a..a673397 100644 --- a/src/components/learning/LearnView/LearnView.tsx +++ b/src/components/learning/LearnView/LearnView.tsx @@ -17,10 +17,14 @@ import LearnViewFooter from "./LearnViewFooter"; import LearnViewHeader, { stopwatchResult } from "./LearnViewHeader"; import LearnViewCurrentCardStateIndicator from "../LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator"; import { useLearning } from "../../../logic/learn"; -import { useDebouncedValue } from "@mantine/hooks"; +import { useDebouncedValue, useFullscreen } from "@mantine/hooks"; import { useNavigate } from "react-router-dom"; +import { useSetting } from "../../../logic/Settings"; function LearnView() { + const { toggle, fullscreen } = useFullscreen(); + const [useZenMode] = useSetting("useZenMode"); + const navigate = useNavigate(); const [deck, isReady, params] = useDeckFromUrl(); const [cardSet, setCardSet] = useState[] | null>(null); @@ -32,6 +36,9 @@ function LearnView() { >(undefined); useEffect(() => { + if (useZenMode && !fullscreen) { + toggle(); + } getCardsOf(deck).then((cards) => setCardSet(cards ?? null)); }, [deck]); @@ -65,6 +72,9 @@ function LearnView() { useEffect(() => { if (controller.learningIsFinished) { stopwatchResult.pause(); + if (fullscreen) { + toggle(); + } } }, [controller.learningIsFinished]); diff --git a/src/components/settings/GeneralSettingsView.tsx b/src/components/settings/GeneralSettingsView.tsx index 8963a0a..e6392e6 100644 --- a/src/components/settings/GeneralSettingsView.tsx +++ b/src/components/settings/GeneralSettingsView.tsx @@ -22,6 +22,11 @@ export default function GeneralSettingsView() { settingsKey="developerMode" inputType={"switch"} /> + ); diff --git a/src/logic/Settings.ts b/src/logic/Settings.ts index 09851e5..0a9cd8a 100644 --- a/src/logic/Settings.ts +++ b/src/logic/Settings.ts @@ -17,6 +17,7 @@ export interface SettingsValues { showListOptionInEditor: boolean; showCodeOptionInEditor: boolean; showLinkOptionInEditor: boolean; + useZenMode: boolean; } export const defaultSettings: SettingsValues = { @@ -29,6 +30,7 @@ export const defaultSettings: SettingsValues = { showListOptionInEditor: true, showCodeOptionInEditor: true, showLinkOptionInEditor: true, + useZenMode: false, }; export function useSetting(