80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { Button, Label, Slider } from "@methanium/ui";
|
|
import { invoke, isTauri } from "@tauri-apps/api/core";
|
|
import { RotateCcw } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const DEFAULT_INITIAL_SCALE = 290;
|
|
const MIN_INITIAL_SCALE = 210;
|
|
const isAndroid = isTauri() && /Android/.test(navigator.userAgent);
|
|
|
|
export default function Page() {
|
|
const [initialScale, setInitialScale] = useState(DEFAULT_INITIAL_SCALE);
|
|
const [loading, setLoading] = useState(isAndroid);
|
|
|
|
useEffect(() => {
|
|
if (!isAndroid) return;
|
|
|
|
let active = true;
|
|
void invoke<number>("accessibility_get_initial_scale")
|
|
.then((scale) => {
|
|
if (active) setInitialScale(scale);
|
|
})
|
|
.catch((error: unknown) => {
|
|
console.error("Failed to load the Android initial scale", error);
|
|
})
|
|
.finally(() => {
|
|
if (active) setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, []);
|
|
|
|
if (!isAndroid) return null;
|
|
|
|
function updateInitialScale(nextScale: number) {
|
|
setInitialScale(nextScale);
|
|
void invoke("accessibility_set_initial_scale", {
|
|
initialScale: nextScale,
|
|
}).catch((error: unknown) => {
|
|
console.error("Failed to update the Android initial scale", error);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex max-w-md flex-col gap-2">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Label htmlFor="initial-scale">Interface scale</Label>
|
|
<span className="text-muted-foreground text-sm tabular-nums">
|
|
{initialScale}%
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Slider
|
|
id="initial-scale"
|
|
aria-label="Interface scale"
|
|
min={MIN_INITIAL_SCALE}
|
|
max={500}
|
|
step={1}
|
|
value={[initialScale]}
|
|
disabled={loading}
|
|
onValueChange={(value) => {
|
|
const nextScale = Array.isArray(value) ? value[0] : value;
|
|
if (nextScale !== undefined) updateInitialScale(nextScale);
|
|
}}
|
|
/>
|
|
<Button
|
|
className="size-8 shrink-0 p-0"
|
|
variant="outline"
|
|
aria-label="Reset interface scale"
|
|
title="Reset interface scale"
|
|
disabled={loading || initialScale === DEFAULT_INITIAL_SCALE}
|
|
onClick={() => updateInitialScale(DEFAULT_INITIAL_SCALE)}
|
|
>
|
|
<RotateCcw className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|