89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import type { Component } from "solid-js";
|
|
import Scaffold from "../material/Scaffold";
|
|
import {
|
|
AppBar,
|
|
Divider,
|
|
IconButton,
|
|
List,
|
|
ListItemButton,
|
|
ListItemSecondaryAction,
|
|
ListItemText,
|
|
ListSubheader,
|
|
Switch,
|
|
Toolbar,
|
|
} from "@suid/material";
|
|
import { Title } from "../material/typography";
|
|
import { ArrowBack } from "@suid/icons-material";
|
|
import { createTranslator } from "../platform/i18n";
|
|
import { useStore } from "@nanostores/solid";
|
|
import { $settings } from "./stores";
|
|
import { useNavigator } from "../platform/StackedRouter";
|
|
|
|
const Motions: Component = () => {
|
|
const {pop} = useNavigator();
|
|
const [t] = createTranslator(
|
|
(code) =>
|
|
import(`./i18n/${code}.json`) as Promise<{
|
|
default: Record<string, string | undefined>;
|
|
}>,
|
|
);
|
|
const settings = useStore($settings);
|
|
return (
|
|
<Scaffold
|
|
topbar={
|
|
<AppBar position="static">
|
|
<Toolbar
|
|
variant="dense"
|
|
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
|
>
|
|
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
|
<ArrowBack />
|
|
</IconButton>
|
|
<Title>{t("motions")}</Title>
|
|
</Toolbar>
|
|
</AppBar>
|
|
}
|
|
>
|
|
<List
|
|
sx={{
|
|
paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
|
|
}}
|
|
>
|
|
<li>
|
|
<ul style={{ "padding-left": 0 }}>
|
|
<ListSubheader>{t("motions.gifs")}</ListSubheader>
|
|
<ListItemButton
|
|
onClick={() =>
|
|
$settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
|
|
}
|
|
>
|
|
<ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
|
|
<ListItemSecondaryAction>
|
|
<Switch checked={settings().autoPlayGIFs}></Switch>
|
|
</ListItemSecondaryAction>
|
|
</ListItemButton>
|
|
<Divider />
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul style={{ "padding-left": 0 }}>
|
|
<ListSubheader>{t("motions.vids")}</ListSubheader>
|
|
<ListItemButton
|
|
onClick={() =>
|
|
$settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
|
|
}
|
|
>
|
|
<ListItemText>{t("motions.vids.autoplay")}</ListItemText>
|
|
<ListItemSecondaryAction>
|
|
<Switch checked={settings().autoPlayVideos}></Switch>
|
|
</ListItemSecondaryAction>
|
|
</ListItemButton>
|
|
<Divider />
|
|
</ul>
|
|
</li>
|
|
</List>
|
|
</Scaffold>
|
|
);
|
|
};
|
|
|
|
export default Motions;
|