91 lines
No EOL
3.6 KiB
TypeScript
91 lines
No EOL
3.6 KiB
TypeScript
import { ChangeEventHandler, useEffect, useState } from "react";
|
|
import { SettingsManager } from "../../../../features/settings/settingsManager";
|
|
import styles from "../Settings.module.css";
|
|
import utilStyles from "../../../../styles/utils.module.css";
|
|
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
|
|
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
|
|
import { WALLPAPERS_PATH } from "../../../../config/apps/settings.config";
|
|
import { useWindowedModal } from "../../../../hooks/modals/windowedModal";
|
|
import { Button } from "../../../_utils/button/Button";
|
|
import { FileSelector } from "../../../modals/file-selector/FileSelector";
|
|
import { SELECTOR_MODE } from "../../../../config/apps/fileExplorer.config";
|
|
import { DEFAULT_FILE_SELECTOR_SIZE } from "../../../../config/modals.config";
|
|
import { IMAGE_FORMATS } from "../../../../config/apps/mediaViewer.config";
|
|
import { VirtualFile } from "../../../../features/virtual-drive/file";
|
|
import { VirtualFolder } from "../../../../features/virtual-drive/folder/virtualFolder";
|
|
import { THEMES } from "../../../../config/themes.config";
|
|
|
|
export function AppearanceSettings() {
|
|
const virtualRoot = useVirtualRoot();
|
|
const settingsManager = useSettingsManager();
|
|
const [theme, setTheme] = useState(0);
|
|
const [wallpaper, setWallpaper] = useState<string | null>(null);
|
|
const desktopSettings = settingsManager?.getSettings(SettingsManager.VIRTUAL_PATHS.desktop);
|
|
const themeSettings = settingsManager?.getSettings(SettingsManager.VIRTUAL_PATHS.theme);
|
|
const { openWindowedModal } = useWindowedModal();
|
|
|
|
useEffect(() => {
|
|
void desktopSettings?.get("wallpaper", setWallpaper);
|
|
void themeSettings?.get("theme", (value: string) => { setTheme(parseInt(value)); });
|
|
}, [desktopSettings, themeSettings]);
|
|
|
|
const onWallpaperChange = (event: Event) => {
|
|
const value = (event.target as HTMLInputElement).value;
|
|
void desktopSettings?.set("wallpaper", value);
|
|
};
|
|
|
|
const onThemeChange = (event: Event) => {
|
|
const value = (event.target as HTMLInputElement).value;
|
|
void themeSettings?.set("theme", value);
|
|
};
|
|
|
|
return (<>
|
|
<div className={styles.Option}>
|
|
<p className={styles.Label}>Theme</p>
|
|
<div className={styles.Input}>
|
|
<select className={styles.Dropdown} aria-label="theme" value={theme} onChange={onThemeChange as unknown as ChangeEventHandler}>
|
|
{Object.entries(THEMES).map(([key, value]) =>
|
|
<option key={key} value={key}>{value}</option>
|
|
)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className={styles.Option}>
|
|
<p className={styles.Label}>Wallpaper</p>
|
|
<Button
|
|
className={`${styles.Button} ${utilStyles.TextBold}`}
|
|
onClick={() => {
|
|
openWindowedModal({
|
|
size: DEFAULT_FILE_SELECTOR_SIZE,
|
|
Modal: (props: object) => <FileSelector
|
|
type={SELECTOR_MODE.SINGLE}
|
|
allowedFormats={IMAGE_FORMATS}
|
|
onFinish={(file) => {
|
|
if ((file as VirtualFile).source != null)
|
|
void desktopSettings?.set("wallpaper", (file as VirtualFile).source as string);
|
|
}}
|
|
{...props}
|
|
/>
|
|
});
|
|
}}
|
|
>
|
|
Browse
|
|
</Button>
|
|
<div className={`${styles.Input} ${styles.ImageSelectContainer}`}>
|
|
{(virtualRoot?.navigate(WALLPAPERS_PATH) as VirtualFolder)?.getFiles()?.map(({ id, source }) =>
|
|
<label className={styles.ImageSelect} key={id}>
|
|
<input
|
|
type="radio"
|
|
value={source ?? ""}
|
|
aria-label="Wallpaper image"
|
|
checked={source === wallpaper}
|
|
onChange={onWallpaperChange as unknown as ChangeEventHandler}
|
|
tabIndex={0}
|
|
/>
|
|
<img src={source ?? ""} alt={id} draggable="false"/>
|
|
</label>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>);
|
|
} |