revite/src/context/Settings.tsx

// This code is more or less redundant, but settings has so little state
// updates that I can't be asked to pass everything through props each
// time when I can just use the Context API.
//
// Replace references to SettingsContext with connectState in the future
// if it does cause problems though.
//
// This now also supports Audio stuff.
import defaultsDeep from "lodash.defaultsdeep";

import { createContext } from "preact";
import { useMemo } from "preact/hooks";

import { connectState } from "../redux/connector";
import {
	DEFAULT_SOUNDS,
	Settings,
	SoundOptions,
} from "../redux/reducers/settings";

import { playSound, Sounds } from "../assets/sounds/Audio";
import { Children } from "../types/Preact";

export const SettingsContext = createContext<Settings>({});
export const SoundContext = createContext<(sound: Sounds) => void>(null!);

interface Props {
	children?: Children;
	settings: Settings;
}

function SettingsProvider({ settings, children }: Props) {
	const play = useMemo(() => {
		const enabled: SoundOptions = defaultsDeep(
			settings.notification?.sounds ?? {},
			DEFAULT_SOUNDS,
		);
		return (sound: Sounds) => {
			if (enabled[sound]) {
				playSound(sound);
			}
		};
	}, [settings.notification]);

	return (
		<SettingsContext.Provider value={settings}>
			<SoundContext.Provider value={play}>
				{children}
			</SoundContext.Provider>
		</SettingsContext.Provider>
	);
}

export default connectState<Omit<Props, "settings">>(
	SettingsProvider,
	(state) => {
		return {
			settings: state.settings,
		};
	},
);