diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx index 8bf7ea8..cb8ff4d 100644 --- a/src/ThemeContext.tsx +++ b/src/ThemeContext.tsx @@ -2,59 +2,63 @@ import React, { createContext, useContext, useEffect, useState } from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { PALETTES, FONT_SCALE, type PaletteKey, type FontSizeKey } from './theme'; +export type MapOrientation = 'north' | 'compass' | 'course'; + interface ThemeValue { - accent: string; - accentDim: string; - palette: PaletteKey; - setPalette: (p: PaletteKey) => void; - fontSize: FontSizeKey; - setFontSize: (s: FontSizeKey) => void; - boldLabels: boolean; - setBoldLabels: (b: boolean) => void; - scale: number; + accent: string; + accentDim: string; + palette: PaletteKey; + setPalette: (p: PaletteKey) => void; + fontSize: FontSizeKey; + setFontSize: (s: FontSizeKey) => void; + boldLabels: boolean; + setBoldLabels: (b: boolean) => void; + scale: number; + mapOrientation: MapOrientation; + setMapOrientation: (o: MapOrientation) => void; } +const MAP_ORIENTATIONS: MapOrientation[] = ['north', 'compass', 'course']; + const ThemeContext = createContext({ ...PALETTES.default, - palette: 'default', - setPalette: () => {}, - fontSize: 'medium', - setFontSize: () => {}, - boldLabels: false, - setBoldLabels: () => {}, - scale: 1, + palette: 'default', + setPalette: () => {}, + fontSize: 'medium', + setFontSize: () => {}, + boldLabels: false, + setBoldLabels: () => {}, + scale: 1, + mapOrientation: 'north', + setMapOrientation: () => {}, }); export function ThemeProvider({ children }: { children: React.ReactNode }) { - const [palette, setPaletteState] = useState('default'); - const [fontSize, setFontSizeState] = useState('medium'); - const [boldLabels, setBoldLabelsState] = useState(false); + const [palette, setPaletteState] = useState('default'); + const [fontSize, setFontSizeState] = useState('medium'); + const [boldLabels, setBoldLabelsState] = useState(false); + const [mapOrientation, setMapOrientationState] = useState('north'); useEffect(() => { (async () => { - const [p, f, b] = await Promise.all([ + const [p, f, b, m] = await Promise.all([ AsyncStorage.getItem('themePalette'), AsyncStorage.getItem('themeFontSize'), AsyncStorage.getItem('themeBoldLabels'), + AsyncStorage.getItem('mapOrientation'), ]); - if (p && p in PALETTES) setPaletteState(p as PaletteKey); - if (f && f in FONT_SCALE) setFontSizeState(f as FontSizeKey); - if (b !== null) setBoldLabelsState(b === 'true'); + if (p && p in PALETTES) setPaletteState(p as PaletteKey); + if (f && f in FONT_SCALE) setFontSizeState(f as FontSizeKey); + if (b !== null) setBoldLabelsState(b === 'true'); + if (m && MAP_ORIENTATIONS.includes(m as MapOrientation)) + setMapOrientationState(m as MapOrientation); })(); }, []); - function setPalette(p: PaletteKey) { - setPaletteState(p); - AsyncStorage.setItem('themePalette', p); - } - function setFontSize(f: FontSizeKey) { - setFontSizeState(f); - AsyncStorage.setItem('themeFontSize', f); - } - function setBoldLabels(b: boolean) { - setBoldLabelsState(b); - AsyncStorage.setItem('themeBoldLabels', String(b)); - } + function setPalette(p: PaletteKey) { setPaletteState(p); AsyncStorage.setItem('themePalette', p); } + function setFontSize(f: FontSizeKey) { setFontSizeState(f); AsyncStorage.setItem('themeFontSize', f); } + function setBoldLabels(b: boolean) { setBoldLabelsState(b); AsyncStorage.setItem('themeBoldLabels', String(b)); } + function setMapOrientation(o: MapOrientation) { setMapOrientationState(o); AsyncStorage.setItem('mapOrientation', o); } return ( {children} diff --git a/src/screens/RecordingScreen.tsx b/src/screens/RecordingScreen.tsx index 19d04f2..5500b7d 100644 --- a/src/screens/RecordingScreen.tsx +++ b/src/screens/RecordingScreen.tsx @@ -17,7 +17,12 @@ type Nav = NativeStackNavigationProp; export function RecordingScreen() { const nav = useNavigation