2023-11-24 18:39:40 +01:00
|
|
|
import isEqual from "lodash.isequal";
|
2023-11-24 17:11:00 +01:00
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
|
|
|
|
|
import { SubtitleStyling } from "@/stores/subtitles";
|
|
|
|
|
|
|
|
export function useDerived<T>(
|
|
|
|
initial: T
|
|
|
|
): [T, (v: T) => void, () => void, boolean] {
|
|
|
|
const [overwrite, setOverwrite] = useState<T | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
|
|
setOverwrite(undefined);
|
|
|
|
}, [initial]);
|
2023-11-24 18:39:40 +01:00
|
|
|
const changed = useMemo(
|
|
|
|
() => !isEqual(overwrite, initial) && overwrite !== undefined,
|
|
|
|
[overwrite, initial]
|
|
|
|
);
|
2023-11-24 17:11:00 +01:00
|
|
|
const data = overwrite === undefined ? initial : overwrite;
|
|
|
|
|
|
|
|
const reset = useCallback(() => setOverwrite(undefined), [setOverwrite]);
|
|
|
|
|
|
|
|
return [data, setOverwrite, reset, changed];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useSettingsState(
|
|
|
|
theme: string | null,
|
|
|
|
appLanguage: string,
|
|
|
|
subtitleStyling: SubtitleStyling,
|
|
|
|
deviceName?: string
|
|
|
|
) {
|
|
|
|
const [themeState, setTheme, resetTheme, themeChanged] = useDerived(theme);
|
|
|
|
const [
|
|
|
|
appLanguageState,
|
|
|
|
setAppLanguage,
|
|
|
|
resetAppLanguage,
|
|
|
|
appLanguageChanged,
|
|
|
|
] = useDerived(appLanguage);
|
|
|
|
const [subStylingState, setSubStyling, resetSubStyling, subStylingChanged] =
|
|
|
|
useDerived(subtitleStyling);
|
|
|
|
const [
|
|
|
|
deviceNameState,
|
|
|
|
setDeviceNameState,
|
|
|
|
resetDeviceName,
|
|
|
|
deviceNameChanged,
|
|
|
|
] = useDerived(deviceName);
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
resetTheme();
|
|
|
|
resetAppLanguage();
|
|
|
|
resetSubStyling();
|
|
|
|
resetDeviceName();
|
|
|
|
}
|
|
|
|
|
|
|
|
const changed = useMemo(
|
|
|
|
() =>
|
|
|
|
themeChanged ||
|
|
|
|
appLanguageChanged ||
|
|
|
|
subStylingChanged ||
|
|
|
|
deviceNameChanged,
|
|
|
|
[themeChanged, appLanguageChanged, subStylingChanged, deviceNameChanged]
|
|
|
|
);
|
|
|
|
|
|
|
|
return {
|
|
|
|
reset,
|
|
|
|
changed,
|
|
|
|
theme: {
|
|
|
|
state: themeState,
|
|
|
|
set: setTheme,
|
|
|
|
},
|
|
|
|
appLanguage: {
|
|
|
|
state: appLanguageState,
|
|
|
|
set: setAppLanguage,
|
|
|
|
},
|
|
|
|
subtitleStyling: {
|
|
|
|
state: subStylingState,
|
|
|
|
set: setSubStyling,
|
|
|
|
},
|
|
|
|
deviceName: {
|
|
|
|
state: deviceNameState,
|
|
|
|
set: setDeviceNameState,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|